My understanding is that in an inline formatting context, line box stacks vertically. And the height of the container box is the distance from the top edge of the topmost line box to the bottom edge of the bottommost line box.
But what happens if the inline element and inline-block element is empty? I guess that no line box will be created in both cases and the container height would be 0.
However the empty inline-block element puzzles. Because its container has a positive height which equals to the line height. It really creates a line box!
Why the empty inline-block element creates a line box, but the empty inline element does not?
<!DOCTYPE html>
<html lang="en">
<body>
<div style="background:red">
<span style="display:inline-block"></span>
</div>
</body>
</html>
Essentially, this statement from CSS 2.2 Section 9.4.2 Inline formatting contexts
Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
So inline-blocks explicitly stop the line containing them from being treated as zero height or not existing.
When you use display: inline it means the content will be in the same line(continuation) as whatever is before and after.
When you use display:inline-block, it begins the display in a new line followed by new content.
Here is a link for examples
https://www.w3schools.com/cssref/pr_class_display.asp
Elements with display: inline-block create a new block and the element will naturally expand to fill the container. Inline elements don't have a width or height property so they don't have any height or width unless there's some content inside it.
Related
div {
background:red;
}
<div><span style="display: inline-block"></span></div>
The w3c send
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).
https://www.w3.org/TR/CSS2/visudet.html#inline-box-height
But when the span display is 'inline', why the div's height are 0?
I am confused?
But when the span display is 'inline', why the div's height are 0?
Not 100% correct because if the span has at least one character the height will be different from 0. Even an invisible zero width space:
div {
background: red;
}
<div><span></span></div>
In case of an empty span (having display:inline) the browser will generate 0 line box. So inside your div there is no line box thus you have a height equal to 0.
Adding one character will trigger the creating of one line box and the rule you quoted will be used and the line-height will define the height of the line box and the height of a div is the height of its line box (since we only have one).
Same logic if you add an empty inline-block element. Even empty, an inline-block will trigger the creation of a line box.
Same logic if you use an empty img:
div {
background: red;
}
<div><img></div>
To use easy words, an inline-block element is still considered as an existing element and we need to generate a line box to hold it. An empty inline element will be considered by the browser as a non-existing element so we don't need any line box to hold something that doesn't really exist.
Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose. ref
line-height only applies when there are actual lines inside an element, in your case, <span>.
Since you did not fill the element with any text, the div does not expand.
If you want to leave the span empty, try specifying height or adding margin to the span, like this:
div {
background: red;
}
span {
display: inline-block;
margin: 1em;
}
<div>
<span></span>
</div>
Why do we say that the display property of floated elements may change to block level, instead of saying inline-block, because it starts taking the space according to the content it wraps?
inline-block means inline level, block container.
inline-level elements participate in the layout of a line (or multiple lines). This affects line spacing and the vertical alignment of other elements in the same line.
Floated elements do none of that. The participate in block formatting contexts, not inline formatting contexts.
That is the purpose of float. found some information in here
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
Also
when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
<style type="text/css">
body > div {
display: inline;
position: relative;
}
body > div > div {
position: absolute;
}
</style>
<div>
<div></div>
</div>
What's the exact containing block of the inner div?
In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
What's the meaning of "the bounding box around the padding boxes of the first and the last inline boxes generated for that element" in the text above?
An inline element cannot "contain" a block-level box in the traditional sense. What happens is that that inline element gets split into individual inline boxes, which live in anonymous block boxes surrounding that block-level box. See section 9.2.1.1 past the first example:
When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
(There is no translation happening here, so the last sentence is impertinent.)
Your case however is a little more special, since the only thing between the start tag of the outer div and start tag of the inner div, and end tag of the inner div and end tag of the outer div, is inter-element whitespace (including line breaks and indentation), which gets collapsed under normal circumstances. So the inline boxes that are generated end up being
empty, and
in the same position: the same position as the strut.
And since the inline element has no padding, the padding boxes of the empty inline boxes is measured to be zero in length, times the line height. (Note that some browser developer tools may render this as a single point marked by a crosshair when you inspect the outer div.) The containing block of the inner (absolutely positioned) div is defined by the perimeter of those padding boxes combined, and any offsets on the inner div (top, right, bottom, left) are relative to that perimeter. Note, however, that since the inline boxes don't actually have content, the actual position of the inner div is the same as the outer div, had the outer div had content.
What is the default behaviour of a div?
I noticed that even if a put a width for a div let's say 100px,
if i put a 2nd div with the same width will put it on the second line.so by default doesn't matter the width. it puts it on different lines?
in this case i understand the need of float.
I thought that any element i put in a html page,they will be side by side unless i add a break element or paragraph or something with that role.
Or maybe i do not use it correctly the div for this kind of alignment,but i really want to
clarify this for good.
A div element is, by default, display: block.
This value causes an element to generate a block box.
The rendering of them is described here
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context.
and then here
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
To stop this kind of rendering, you can use float to cause block level elements to bubble up beside each other. You can also modify the display property of the div.
Divs are block-level elements which mean they stack...like blocks. Although it sounds reasonable that since the width would allow them to fit side-by-side without a float, this is not how they are designed to behave.
If an element is an inline element as opposed to a block, its behavior is to fit side-by-side. You can force this behavior on a div if you would like by tying the two ideas together. You can do something like:
<div style="display:inline-block"></div>
This will allow the div to maintain its other block properties but allow it to fit inline as text and images would and, if this the your desired goal, avoid the use of float.
The DIV by default takes 100% of the screen, even if you set it width the space on the right cannot be occupied by anything.
Try this:
The way to have two div on the same line would be to make them float:
<div style = 'float:left;width:500px;background-color:red;color:white;'>Hey</div>
<div style = 'float:left;width:100px;'> There</div>
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: