显示内联元素的“padding”和“border”

Question

我想了解内联格式化上下文中内联元素的垂直填充和垂直边框的相关规则。

span1 到 span12 是根据文本对齐的。但是，它们周围仍然有一个奇怪的边框/填充，与周围的内容重叠。

我正在尝试找出 CSS 规范中行为的基础。这就是规范所说的：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.

所以，margin-top 和 margin-bottom 被特别提到是一个 noop。但是该规范对内联元素的填充和边框只字未提。是从别的地方推断出来的吗？

事实上这里说的恰恰相反：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.

这表明边界不应重叠。

还有：

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.

这表明该行为可能是预期的。

基本上，我试图根据规范弄清楚它是如何工作的，即使它明确定义为未定义。 FWIW，Chrome 和 Firefox 的行为相同。

  .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>

Answer 1

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、border存在但不影响line box高度的计算。与填充边框不同，边距是看不见的，但它确实存在。您可以在检查元素时注意到它。

显示内联元素的“padding”和“border”

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

html

css

padding