According to http://www.maxdesign.com.au/articles/inline/, the section called "Inline elements and padding" says
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.
So in accordance with that, it seems that it is never ever any point to use padding vertical(top,bottom) for inline elements.
Is that correct?
Well, the padding box is the area covered with the background colour, and the border is painted around that, so changing the padding top and bottom can change what the inline element looks like even if it has no effect on the surrounding content.
Related
Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
Ok, I am quite new to frontend development so please be nice if this is a dumb question :)
I understand that this may not be possible but when applying line-height to an element say an h1, the line-height applies extra space to both the top and bottom of that element.
This kind of makes sense, but i only want line-height to be applied to the bottom of the element so the tops of my h1, h2 etc can be alined perfectly with other elements.
This jsfiddle shows the problem: http://jsfiddle.net/zja4c/1/
This jsfiddle shows what i want to achieve but am forced to use negative margins: http://jsfiddle.net/25UTA/
The h1 with background colour of red aligns correctly to the top of the left div, but the text doesnt.
My question is therefore, is there a way to:
Apply line-height to only the bottom of an element or,
Align an element to the top of the space created by applying line-height somehow
Using line-height is your only option if you wish to maintain proper spacing across line-breaks. Padding will occur on the bottom of the block-level H1 element, as you pointed out. I think negative margins are your best bet, but you'll have to fine-tune it line up perfectly with a 50px line-height:
http://jsfiddle.net/25UTA/1/
If negative margins can't be used for some reason, you can use relative positioning and a negative top value to achieve a similar effect.
http://jsfiddle.net/25UTA/2/
Using em's or percentage font-sizes and line-heights might make this eaiser.
None of these answers reference elements with their display set to inline.
Line-height is a setting that refers to inline elements. Every answer so far has referred to using padding and margin, which don't work with inline styled text.
You can modify the positioning of text within its line with vertical-align. Here's a link to an article that goes into copious detail about the property and how it works:
http://christopheraue.net/2014/03/05/vertical-align/
A simple solution is to make the line-height 70% and add a little bit of bottom padding.
p, h2 {
line-height:70%;
padding-bottom: 3px;
}
In my knowledge its not possible to apply line-height only for bottom using css.
So you can try with padding as user1538100 said.
You could forget line height completely and use padding-bottom:
fiddle
This is my code :
HTML
<div class='father'>
<div class='son'>Son</div>
</div>
CSS
.father
{
background-color:blue;
}
.son
{
margin-top:50px;
background-color:red;
height:50px;
}
Where is the background-color blue of the father?
I know how to fix this problem (putting padding-top:1px to the father) but I'd like to know why of this behaviour!
For me it doesnt make sense, because on every browsers, not only IE, this is the behaviour.
This is a result of Collapsing Margins. You can read a good article by Eric Meyer on this topic where he illustrates this exact behavior. The following image is from his article.
Here's what the CSS2 specification has to say about it.
8.3.1 Collapsing margins
If the top and bottom margins of a box are adjoining, then it is
possible for margins to collapse through it. In this case, the
position of the element depends on its relationship with the other
elements whose margins are being collapsed.
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as
the parent's.
Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved.
The position of the element's top border edge is the same as it
would have been if the element had a non-zero bottom border.
Note that the positions of elements that have been collapsed through
have no effect on the positions of the other elements with whose
margins they are being collapsed; the top border edge position is only
required for laying out descendants of these elements.
Source: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
This is because the div is a block-level element. Certain block-level elements don't contain any padding by default. Divs are one such element. Block-level elements will take up the entire height and width of the container while respecting any padding it may contain.
W3C Visual formatting model
The parent element's height is set to its content's height by default. Once you set a height on the parent, that's no longer the default. Checking up on it, I believe that the padding adds to the height. So, the height is originally determined by the content unless otherwise stated in the CSS. Then, in most cases (IE 6 may be the exception), the padding is added to the height.
Good thing about SO, it helps us be much more detailed in our responses. :)
In CSS, block level elements naturally fills the elements content area, so your "son" div is filling your "father" div completely. Of course, you can bypass this by adding margin/padding/height to your parent div.
You're setting blue explicitly:
.father {
background-color:blue;
}
It's overridden (thanks to the "C" in CSS a.k.a cascading) but the style remains on your parent element (here, appropriately named "father").
If your .father box receives any height at all (check in the Firebug/Chrome dev tools inspector) than the blue is going to show through. I am guessing this is what you're seeing in IE (that or perhaps there's a flash of content before your child element style comes in). I don't think the IE debug tools show bounding boxes but you can test the element for it's height using JavaScript.
Moving outwards from the content, you have padding, border, and margin (as you probably know). Background covers only padding, but not margin.
HTML and CSS boggle my mind sometimes.
A DIV with a border shows its background color for the full height of the element and its contents. Why is it that without a border, a DIV will assume (reverse inherit?) its child's margins?
As an example, here is a JSFiddle illustrating the behavior with and without borders.
http://jsfiddle.net/ahNUX
http://jsfiddle.net/ahNUX/1/
Does anyone care to explain how this is a "feature" and not some kind of bug?
Update: adding 1px of padding to the parent is a quick fix.
Sure. In CSS, by default, adjacent top and bottom margins overlap each other. This was a sensible workaround before the adjacent sibling selector (+) was thought of/became well-supported, as it meant that if you wrote h2 {margin-top: 3em;}, you’d have 3ems worth of space above your h2s even if there was a paragraph before it with a bottom margin of 1em.
In your second example, because the <div> doesn’t have any top or bottom padding or borders, its top and bottom margins are adjacent to the <h1>'s default top and bottom margins. Even though the <div>’s margins don’t have any height, they’re still treated as if they exist, and so the <h1>’s margins have to overlap them. As the <div>s margins are by definition outside of the background-color area of the <div>, the <h1>’s margins have to be positioned outside too.
In your first example, because the <div> has a border, its margins are no longer adjacent to the <h1>’s margins, so no overlapping occurs. You can get the same effect by adding top and bottom padding to the <div>: http://jsfiddle.net/ahNUX/7/
(I’m not sure what you mean about the <div> “reverse-inheriting” its child’s padding though. In your examples, neither the <div> nor the <h1> have any padding. The space inside the <div> in your first example is created by the <h1>’s top and bottom margin.)
This is a result of collapsing margins. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
In a nutshell the top and bottom margin on the <h1> element in your example may have its margin collapse (or overlap) with another element that's above or below it, which would result in a conflict with the background color, so it's not shown. On the other hand, if you have a border, the rules change.
The spec explains it pretty well, albeit in a dry and somewhat technical tone.
I was trying for display:inline property and I found same question for which I was looking....and here I got this answer, it makes me very clear ....but I am not clear about these lines ...
Basically margin, padding and border
can be set on inline-level elements,
but they may not behave as you expect.
The behavior will probably be OK if
there's only one line, but other lines
in the same flow will likely exhibit
behavior different from your
expectations (i.e. padding will not be
respected).
so please anybody can make me clear about these lines...I have also tried for display :inline here
You cannot set height, margin-top, margin-bottom, padding-top and padding-bottom on an inline element. You can set margin left and right an padding left an right.
You can set with on an inline element but then it will behave like a block element: See here
Inline Elements will always be displayed next to each other as long a they fit next to each other.
yes inline element behave differently other then block element. the main point of inline element is that is doesn't take vertical margin & padding.
inline elements like a, span
you can give inline-block instead of inline
this is a best example related to your question
http://www.maxdesign.com.au/articles/inline/
EDIT
yes, padding-bottom pushing the inline element down but it's not add any width to your inline element means when the content move to new line it's going to overlap each other & in block element margin, padding & border are adding width,height & space the block element
check these link for more
http://reference.sitepoint.com/css/inlineformatting
with this property set (display:inline) you can't set width and height of your element. Margin, padding & border is ok. I'd use floating instead, but that's because it gives me more flexibility sometimes. =]
It is saying that if you have an inline element that goes all the way to the right of the page and then wraps around to the left (for example, a single line of text that takes up two lines of space) then you may have unexpected consequences. In particular the padding may not display as desired.
An inline element, when it doesn't break on to multiple lines, respects left/right padding - so you see the padding-left and padding-right inside the left and right edges of the element respectively.
When the inline element does break on to multiple lines, the padding is somewhat respected, in that again both left and right inside edges of the element have padding. The part where it isn't respected is exactly the part where the element breaks, the break-point doesn't have any padding because it simply spreads itself onto the next line.
A block element on the other hand, does respect padding properly because it adds the padding and the contents of the element break inside that padding.
Here's a quick image to help explain what I've explained: