If I give a line-height to a block element like h1 it adds the space above and below the each text line, that means the element does not begin on the same top position. What if I just want a spacing below each line? I know that vertical-align does only work with inline-elements.
I also recognized that a text of a block element like a p tag is not on top with line-height "normal", by default. If I add a background-color to the element, the colour is also visible a few pixels above the text. Why?
TLDR: Use position: relative and a negative top value to fake it.
Explanation: You're right. Line-height is always added above and below each character. So if your font-size is 12px and you have a line-height of 18px, you'll get 3px above and 3px below each "line". Each of those 3px spaces is called a "half-leading".
However, you can use position: relative with a negative top value to make it seem like there is only space added beneath each line.
So lets say you wanted to have 8px of space between each line instead of just 6px from the example above (18px/12px = 6px = 3px on top + 3px on bottom) . To do this, increase the line-height from 18px to 20px to make the half-leading 4px and give a total of 8px of space between lines. Then add position: relative; top: -2px to bump the line back to same place it was when the line-height was 18px.
Even though the browser is still adding 4px of space above and below each line, the negative vertical positioning will make it seem like that extra top spacing was cut off.
What if I just want a spacing below each line?
I don't really see how the accepted answer is any better than this, for most cases:
margin-bottom: .5em
The important thing is to use em since is will be based on the current font size.
In addition note that if the text wraps to two lines and you're using line-height: 2 then you'll end up with a huge gap between the lines. Then you're almost certainly better off using margin-bottom with a default line-height.
Related
I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.
Here is a good slide show to help you understand this concept more... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
Note there is a default value of line-height property.
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
think this as a notebook which we children use to learn English -writing in nursery class
The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
Let me explain my view of the difference between line-spacing (which I would like to emulate), and line-height, using this picture:
Here you can see text with line-height > 1 inside a container with padding. An extra visual whitespace is added to the top and bottom of the text, and I want whitespace to be added between the lines only.
Why I (and you) may need this feature, emulated line-spacing? Because if you have buttons or images inside this container alongside with text with line-height > 1, text and images will look misaligned. Text has extra whitespace added to the top and the bottom, which causes edge of the text look more far from the container border.
To avoid this, I manually add negative margins to the text:
h1 {
font-size: 30px;
line-height: 42px; /* or 1.4 */
margin: -6px 0 -6px 0;
}
So what's the problem?
I am very dependent on font-size in pixels. I need to recalculate margins after every change of font-size or line-height, and I have to calculate it for h3, p and so on.
I'm looking for some way to automate this (some magic I'm missing).
In CSS code,
we use
#testing{
margin: 0;
padding: 0;
}
i use RECESS to code qualify my css file
it suggest me to use padding first and margin after
#testing{
padding: 0;
margin: 0;
}
My question is, does the order of padding and margin important in css quality?
And what's the different between padding first and margin first?
EDIT
just wondering why it suggest the order for me
My question is, does the order of padding and margin important in css quality?
I consider the reason is "coding style".
In order to readability, consistency, manage, picky...
You can also order by a-z, type, css3 last...etc.
And what's the different between padding first and margin first?
Looks.
Example:
WordPress CSS Coding Standards
Google HTML/CSS Style Guide
Margin is applied to the outside of you element hence effecting how far your element is away from other elements.
Padding is applied to the inside of your element hence effecting how far your element's content is away from the border.
Also, using margin will not affect your element's dimensions whereas padding will make your elements dimensions (set height + padding) so for example if you have a 100x100px div with a 5px padding, your div will actually be 105x105px
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content from top to bottom.
i.e. immediately on top content it takes padding value, border and finally on top of everything margin would come.
Margin,padding and border values should be deducted from the width before assigning the width value in css. For example width: 100px, padding: 10px, margin: 10px, border: 5px means width of the total container is 150px(100px+20px (left and right padding each 10px) + 10px (left and right border 5px each) + 20px (left and right margin)).
order of giving padding and margin values doesn't make any difference. we can write in any order in css.
I am using the following code to style blockquotes on my site:
blockquote {
border-left: 7px solid #b83131;
background: #ebebeb;
margin: 1.5em 25px;
padding: 1px 10px;
quotes:"\201C""\201D""\2018""\2019";
}
The line that begins with padding: controls the padding on the top and bottom of the block quote. For some reason, it doesn't work as it should. Instead of padding by only 1px, it is always way more than that. It's as if, no matter what I set as the padding, it is always at least a few pixels high.
For example, with the padding set as you see in the code above, this is the result:
As you can see, the padding on the top and bottom is way more than 1px. Why is that? I want the padding to be a true 1px, but it seems that no matter how I alter the code, it's either no padding at all, or way more than 1px.
Any help here?
If you take a look at the following jsfiddle, you will see that with only the code you posted, one cannot reproduce the problem.
I for myself believe that there is a <p> tag inside your blockquote.
Just remove it by setting its margin to 0.
p {
margin: 0;
}
Try adjusting the line height of the text within the blockquote. It might be that the 1px top and bottom padding is enough to for the text to kick down to the next full line making it looks like it's over padded.
I had the a similar problem: I was trying to minimize the space above the block quotation, so I set
BLOCKQUOTE {margin-top: 0}
This seemed to work sometimes, but not always.
Here's what I discovered: When it didn't work, there was an unclosed paragraph <P> tag somewhere above the quotation. The opening <BLOCKQUOTE> tag effectively closes that paragraph, so the unwanted whitespace was coming, not from the top margin of the quotation, but from the bottom margin of the paragraph above it. This fixed it:
BLOCKQUOTE {margin-top: 0}
P {margin-bottom: 0}
Of course, if you don't want every paragraph to have zero bottom margin, you can define a special class.
I am building a page using blocks of sections:
http://jsfiddle.net/NrkTn/3/
You can see I have added margin to the section elements, however I'm unable to add both top and bottom margins, it uses whichever is the largest value.
Each section should have a top and bottom margin of 20px, making the space between them 40px, however it is showing a margin of only 20px.
Margins collapse on themselves: http://jsfiddle.net/NrkTn/4/
That is expected behavior. It will always take the largest margin and not a combination of the two. Here's an article that explains this.
Margins collaspe on themselves, so that is expected behavior. You could do what you want by changing your section CSS to use borders instead
#page section{ border-top: 20px solid white; border-bottom: 20px solid white; }
http://jsfiddle.net/SAcK8/
Another way to do what you want is to wrap your sections in divs and use padding