First of all, it's important to define the vocabulary here:
- DOM tree elements are visually rendered with boxes (0 or more boxes), each of them having a specific type,
- the type of each box is described with the display CSS property,
- a
display:block;box is a block type box, - a
display:inline;box is an inline type of box, and it's what we will be talking about here.
Whenever you have an inline element in a page, it establishes an inline formatting context.
The main rule for this context is that all boxes inside it are layed out horizontally, one next to the other in a line box.
If there isn't enough space to fit all boxes in one line box, extra line boxes are created it below the first one. In any case, a line box cannot be wider than the containing block.
Note that in many cases, the split from one line box to the other occurs in the middle of an inline box.
In the previous image, the <em> element has been split between 2 line boxes.
When an inline box is split across more than 1 line boxes, the padding, border and margin defined on the inline box only apply to the beginning of the first part of the split element, and to the end of the last part of the split element.
As illustrated in the previous image, the highlighted <span> is split across 2 line boxes and its horizontal padding doesn't apply to the end of the first line box, nor to the beginning of the second line box.
Additionally, and maybe more importantly, in an inline formatting context, padding, border and margin only have an horizontal effect. That doesn't mean they're not applied vertically however, it only means that a top padding for instance won't increase the space between lines. Use line-height for this.
As you can see in the above image, the 0.2em padding is applied on all 4 sides, but top and bottom padding doesn't push other boxes around. The padding will keep on pushing the border though, if there is one defined, as illustrated bellow:
When debugging layout issues or styling problems, it's important to have tools that actually give you the complete picture about what's going on.
One of these tools is the highlighter. All browser have it in their devtools, it's what's used to highlight hovered elements when inspecting, but it does much more than allowing to select elements, it gives you information about the layout of elements too.
In the example above, the devtools in Firefox is used to highlight an inline element split across several lines. On top of displaying guides useful for aligning elements and giving the outer dimension of the node, the highlighter also displays an overlay over each defined box-model region. Here, in this example, the content region is displayed in light-blue, and is split over 4 lines. A right padding is also defined on the node, so the highlighter shows the padding region too, in purple.
Highlighting each individual line box is important for understanding what was explained in the previous section, but is also helpful for checking space between lines (line-height) or vertical alignment of inline boxes.
Note that individual lines are only highlighted starting with Firefox 39.