Which element does the inline block apply to?
I am researching the attribute inline-block
and know that it helps the elements on one line (instead on each line as usual). But I don't know how it works inline-block
.
Element inline-block
X will make X the same line with the previous element or make the next element the same line with X.
For example the code below:
div {
background: #eee;
color: black;
margin: 10px;
}
.one {
display: inline-block;
}
<div class="one">One</div>
<div class="two">Two</div>
<div class="one">Three</div>
<div class="one">Four</div>
I run and see the result: one on one line (but a wrapper), two on a new line (without a wrapper), and three and four on one line (but different with two). I can not explain. Please tell me why they behave this way.
source to share
From specification
§9.2.2 Line-level elements and inline boxes
Row-level elements are those elements in the original document that do not form new blocks of content; content is distributed across lines (for example, underlined sections of text in a paragraph, inline images, etc.). The following values for the 'display' property make the element inline-level: 'inline', 'inline-table', and 'inline-block'. Row-level elements generate row-level boxes, which are boxes that participate in the inline formatting context.
§9.2.1 Block Level and Locking Elements
Block-level elements are those elements in the source document that are visually formatted as blocks (for example, paragraphs). The following values for the 'display' property make up the block-level element: 'block', 'list-item', and 'table'.
Block levels are blocks that participate in a formatter . Each block level element generates a main block level containing child blocks and generated content and is also a field used in any positioning scheme.
When you mix block-level and inline-level blocks inside a block container block, then anonymous block-level blocks are generated:
In a document like this:
<DIV> Some text <P>More text </DIV>
(and assuming the DIV and P have "display: block") the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume there is an anonymous block box around "Some text".
Diagram showing three windows for example above
Diagram showing three windows, anonymous, for the example above.
In other words: if a container block field (for example, generated for the DIV above) has a block-level inside it (for example, P above), then we force it to have only level locks inside it.
In your example, it would be something like
source to share
inline-block
puts an element in the field of a string. Where exactly this line box appears depends, among other things, on the surrounding elements as well as the size of the container.
The block-level element will be vertically separated from any lines of the line unless it is floated (in which case it will sit next to the line margin if there is enough room to do so). This is because inline boxes are a strict inline layout concept and do not exist in a block layout, and block level items are laid out vertically in normal flow. This is why element two is on its own line.
Items three and four do not have a block-level element separating them and will therefore appear in the same line box (unless you need to wrap them) after the second element. In this respect, they behave like two separate words.
Unfortunately I am not aware of any good links describing the interaction between block layout and inline layout. The next best section is 9.4 CSS2.1 , which describes the normal flow, but being a technical spec, I suspect most authors will have a hard time writing it in this example.
source to share