I have stumbled across a problem that I can not seem to solve in any way, maybe I am using divs in a wrong way?
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
This is the outcome:
I want to decrease the space between my <h1> and <h2>, and I found out that the way to do that was to set line-height in h1 to 0px.
But as I do that my entire page moves up like so:
I want to keep the text at the same position as it was before I change the line-height. I am suspecting that I am using the div class function wrong. This is more of theoretical question.
headings h1 to h6 have margin by default, so you need to reset it, setting: margin:0.
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin: 0
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
text-align: center;
margin: 0
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
HTML heading tags have some default CSS values applied in most browsers. Following are the values of h1 and h2 that are applied to them by default, so you need to override the margin-bottom of h1 and margin-top of h2 if you want to decrease the spacing between your h1 and h2.
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin-bottom: 0;
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center;
margin-top: 0;
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
Just add the following lines
.greeting h1 {
margin:0px;
line-height:35px;
}
.greeting h2 {
margin:0px;
line-height:35px;
}
If you just want you to assign the margin only for this block you do not need to define it globally you can just do the same this using inline CSS
<h1 style="margin-bottom: 0">Hi</h1>
<h2 style="margin-top: 0">Select a group</h2>
Related
How i can remove the space between strings "Text 1" and "its simple"? I need to create whitespace in only 10 pixel, i.e. via margin-top: 10px;. But when i use margin-top: 10px;, total space is 10 pixel + shift.
In my opinion, the white space are formed directly by the margin of the font. With what element can i change the size of this whitespace?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.title {
font-family: Roboto;
font-size: 41px;
font-weight: 900;
text-transform: uppercase;
color: #f9bf3b;
text-align: center;
}
.simple .title_big {
font-family: Roboto;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
color: #000000;
text-align: center;
}
<h1 class="title">Text 1</h1>
<div class="simple">
<h2 class="title_big">its simple!</h2>
<div class="line"></div>
</div>
<h2 class="title">Text 2</h2>
Set your line-height equal to 1 on the respective classes. This is equivalent to line-height: 100%;, meaning 100% of the font size for that element, not 100% of its height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.title {
font-family: Roboto;
font-size: 41px;
font-weight: 900;
text-transform: uppercase;
color: #f9bf3b;
text-align: center;
}
.simple .title_big {
font-family: Roboto;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
color: #000000;
text-align: center;
}
h1.title,
h2.title_big {
line-height: 1;
}
<h1 class="title">Text 1</h1>
<div class="simple">
<h2 class="title_big">its simple!</h2>
<div class="line"></div>
</div>
<h2 class="title">Text 2</h2>
Is this what you happened to be looking for? I used a negative margin in the .simple .title_big class (-15px to be exact) to remove the margin that was in the text to add less whitespace then there was before. But still leaving you with some.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.title {
font-family: Roboto;
font-size: 41px;
font-weight: 900;
text-transform: uppercase;
color: #f9bf3b;
text-align: center;
}
.simple .title_big {
font-family: Roboto;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
color: #000000;
text-align: center;
margin: -15px 0;
}
<h1 class="title">Text 1</h1>
<div class="simple">
<h2 class="title_big">its simple!</h2>
<div class="line"></div>
</div>
<h2 class="title">Text 2</h2>
I have an h1 with no margin nor padding but there is still some white space above and under the content inside the h1.
Is it because of the font or is there something else ?
I tried setting margin-block-start and margin-block-end to 0 but nothing happened.
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 10px;
box-sizing: border-box;
overflow-x: hidden;
}
h1 {
font-size: 3rem;
}
.accueil .container h1 {
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 4.5rem;
text-transform: uppercase;
}
.accueil .container h3 {
font-size: 2rem;
letter-spacing: 1px;
margin-bottom: 2rem;
}
<div class='accueil'>
<div class='container'>
<h1>SOMETHING</h1>
<h3>something else</h3>
</div>
</div>
As you can see in the inspector, the "margin" (white space) you saw is actually the content part of the box-model of h1. So that's not because of margin or padding, it's because of the font itself. Try tweaking around with line-height, font-size,... etc to see if you get the result desired.
Remove margin for h1 or h3 like
h1 {
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 4.5rem;
text-transform: uppercase;
margin:0; /*Add This*/
}
h3 {
font-size: 2rem;
letter-spacing: 1px;
margin-top:0; /*Add This*/
margin-bottom: 2rem;
}
I'm styling the section headings for a website and I can't quite get a span symbol and a H1 heading to align properly. This is how it looks on the site -
Annoyingly, when I've come to include the code in this snippet the two elements seem to align. When I check the console the span element seems to have a buffer around the symbol which prompts it slightly out of line as you can see in the image. I'm using bootstrap for the site, could this be a hidden rule that I'm missing?
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
}
.secthead h1, span {
display: inline-block;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
Just use vertical-align: middle; in both tag & remove padding from bottom in h1 tag. check updated snippet below..
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 0px 20px;
}
.secthead h1, span {
display: inline-block;
vertical-align: middle;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
You could use a height and line-height.
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
margin: 0;
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
line-height: 92px;
}
.secthead h1, .secthead span {
height: 92px;
display: inline-block;
vertical-align:top;
height: 92px;
}
<div class="secthead">
<span style="color: rgb(255,128,55);">+</span>
<h1>Who We Are</h1>
</div>
This might be a stupid question, but it has been troubling me a lot.
I have made 4 boxes and each box should have the text starting from a same line, but sometimes (when the text is less), it starts from the bottom.
Here's the image displaying it:
Ideally, it should start from the top and go till the bottom. Like this:
What changes should I make in my CSS code?
CSS :-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
My JSFiddle :- http://jsfiddle.net/xa0obvyr/
Because you are using inline-block, you need to specify vertical alignment if the default value doesn't suit you. In this case, you need
show-text-col-4 {vertical-align: top;}
However, your setup is less than ideal. Rather than floating the first time with a large left margin, I'd recommend you use a centered wrapper element instead, and style each of the columns in the same way.
This is what you need? with one CSS class and automatic 1/4 width of each column.
Please check the demo: http://jsfiddle.net/sk1rqxeo/
.show-text-col {
float: left;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
color: #606060;
width:24.5%;
display: inline-block;
}
You will need to set width to <p> tag
FIDDLE DEMO
.show-text-col-3 p{
width:200px;
}
Please, consider the following CSS code:
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
}
.main-headline {
font-family: 'Open Sans', sans-serif;
font-size: 3.1875em;
font-weight: 700;
text-align: center;
margin-bottom: 0em;
margin-top: 5em;
}
.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em;
.container_12 .grid_12 {
width:58.75em;
}
And HTML:
<header class="container_12 grid_12 alpha omega">
<div class="grid_12 alpha omega">
<hgroup>
<h1 class="main-headline">Some text</h1>
<p class="h1-sub grid_12 alpha omega">Some text</p>
</hgroup>
</div>
</header>
The problem is:
.h1-sub class takes weird width. There is a body font-size 16px and container: 58.75em which should be equal 940px. But instead it I receive 1234px in width. I've made a conclusion that my width calculates from .h1-sub font-size which is 1.3125em or 21px.
Does 1em value can be inherit not only from body font-size?
Notice that nothing happened to .main-headline class where is font-size has been overridden also.
This line of CSS:
.container_12 .grid_12 { width:58.75em; }
Is trying to select anything with a class of .grid_12 inside .container_12.
That is therefore trying to give the width to the p tag. If that's not what you're trying to do, you need to just declare:
.container_12 { width:58.75em; }
Also you forgot to close the .h1_sub styles with a } at the end:
.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em; }
Here is a working fiddle: http://jsfiddle.net/B893S/