Question

我正在读一本关于CSS基础知识的书。书中声称内联元素具有完整的填充属性，但没有 margin-top / bottom 属性，只有 margin-left / right 属性。

我的第一个问题是，我在哪里可以找到这个官方声明？我发现here如果 margin-top / bottom 设置为auto，则会将其设置为0。但与 margin-top / bottom 不适用于内联元素有什么不同？

我的第二个问题是，内联元素是否真的具有完整的填充属性？我尝试了以下示例：

<!DOCTYPE html>
<html>
  <head> </head>

  <body>
    <div style="margin: 20px; border: solid 20px;background: red;">
      <p style="margin:0">
        test test test test test test test test test test test test test test
        test test test test test test test test test test

        <strong style="padding:20px;background-color:yellow">hello</strong>
        test test test test
      </p>
    </div>
  </body>
</html>

现在，这表明填充实际上以某种方式工作，但由于某种原因，padding-top和padding-bottom对周围的文本没有影响。这是为什么？这是在W3标准中提到的吗？

Answer 1

书中声称内联元素具有完整的填充   属性但没有margin-top / button属性，只有margin-left / right   属性。

我的第一个问题是，我在哪里可以找到这个官方声明？

你不会，因为它不是真的。在box model中，它表示对于margin-top和margin-bottom：

这些属性对未替换的内联元素没有影响。

但“没有效果”并不意味着这些属性不存在。具体而言，它们确实存在以用于继承。考虑这个例子：

p { border:1px solid red }
i { vertical-align:top; }
span { margin-top: 20px; margin-bottom: 20px;  }
b { display:inline-block; }
.two { margin:inherit;  }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

我们可以看到具有类“two”的b元素继承了内联的非替换span元素的margin top和bottom属性，并且因为b元素是inline-block，所以margin-top和bottom确实会导致布局差异。如果跨度上不存在margin-top和bottom属性，那将是不可能的。

Answer 2

但由于某种原因，它对周围的文字没有影响

尝试将margin替换为padding strong元素，将display:inline-block添加到strong样式

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="margin: 20px;
          border: solid 20px;
          background: red;">
    <p style='margin:0'>test test test test test test test test test test test test test test test test test test test test test test test test
      <strong style="margin:20px;background-color:yellow;display:inline-block;">hello</strong>
      test test test test</p>
  </div>
</body>
</html>

Answer 3

我的第一个问题是，我在哪里可以找到这个官方声明？我在这里发现如果margin-top / bottom设置为＆＃39; auto＆＃39;然后它被设定到＆＃39; 0＆＃39;。但与说＆margin-top / botton不同之处有什么不同不适用于内联元素＆＃39;？

在8.1 Box Model Spec（http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin）＆＃34中;边缘边缘围绕框边距。如果边距的宽度（高度）为0，则边缘边缘与边缘边缘相同。＆＃34;

在您关联的页面10.6.1＆＃34;＆＃39; height＆＃39;属性不适用，但盒子的高度由“＆＃39;行高”给出。。属性＃＆34;因此，由于高度不适用，因此边缘边缘与边界边缘相同。

我的第二个问题是，内联元素是否真的完整填充属性？我尝试了以下示例：

与上述相同的原因。＆＃34;盒子的高度由行高＆＃39;给出。属性＆＃34 ;.该强元素的高度由line-height设置，因为它没有作为块或内联块元素引用的高度。我很确定你是否给它内联块属性，因为块在模型中具有高度。

内联元素的填充

3 个答案: