Search code examples
htmlcsspadding

`padding` and `border` for inline elements being shown

I want to know the rules surrounding the vertical padding and vertical borders for inline elements in inline formatting context.

The span1 to span12 are aligning on the basis of the text. But, they still have a weird border / padding around them which overlaps the surrounding content.

I am trying to figure out a basis for the behaviour in the CSS spec. This is what the spec says: https://www.w3.org/TR/CSS22/box.html#margin-properties

These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

So, margin-top and margin-bottom is specifically mentioned to be a noop. But the spec says nothing about padding and border for inline elements. Is it inferred from somewhere else?

In fact it says the opposite here: https://www.w3.org/TR/CSS22/visuren.html#inline-formatting

A line box is always tall enough for all of the boxes it contains. [...] Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

Which suggests borders should not have overlapped.

But also:

The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.

which suggests the behaviour may be expected.

Basically, I am trying to figure out how is this working based on the spec, even if it explicitly defines it to be undefined. FWIW, both Chrome and Firefox behave the same.

  .div1 {
  border: 10px solid black;
}

.div2 {
  border: 10px solid rgba(7, 154, 70, 0.5);
}

span:nth-child(2n) {
  border: 50px solid rgba(255, 0, 0, 0.5);
  background: rgba(0, 0, 255, 0.5);
  padding: 20px;
  margin: 10px;
  vertical-align: baseline;
}
<div class="div1">
    Div1
</div>
<div class="div2">
    Div2
    <span>Span1</span><span>Span2</span><span>Span3</span><span>Span4</span>
    <span>Span5</span><span>Span6</span><span>Span7</span><span>Span8</span>
    <span>Span9</span><span>Span10</span><span>Span11</span><span>Span12</span>
</div>

Solution

  • The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

    https://www.w3.org/TR/CSS22/visudet.html#inline-non-replaced

    padding, margin and border exists but have no influence on the calculation of the line box height. Margin cannot be seen unlike padding border but it does exist. You can notice it when you inspect the element.

    enter image description here