内联元素的填充

发布于 2025-02-06 13:16:21 字数 1242 浏览 6 评论 0原文

我正在读一本关于CSS基础知识的书。在书中据称，内联元素具有完整的填充属性，但没有保证金顶/底部属性，只有 linf-left/right 属性。

我的第一个问题是，我在哪里可以将其作为官方声明？我发现在这里设置为auto，然后将其设置为0。但是，这与说保证金顶/底部不适用于内联元素并不不同吗？

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

<!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标准中的任何地方都提到过吗？

原文

I am reading a book about CSS basics. It is claimed in the book that an inline element has complete padding properties but no margin-top/bottom properties, only margin-left/right properties.

My first question is, where can I find this as an official statement? I found here that if margin-top/bottom is set to auto then it is set to 0. But isn't that different from saying margin-top/bottom does not apply to inline-elements?

My second question is, does an inline element really got complete padding properties? I tried the following example:

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

Now, this shows that padding actually works somehow, but for some reason, padding-top and padding-bottom has no effect on the surrounding text. Why is that? Is this mentioned anywhere in the W3 standards?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云淡风轻 2025-02-13 13:16:21

在书中声称内联元素具有完整的填充
属性，但没有保证 - 顶/按钮属性，只有边距/左/正确
属性。
我的第一个问题是，我在哪里可以找到它作为官方声明？

您不会，因为这不是真的。在 box型号它说，这是用于保证金和margin-top and Margin and Margin -底部：

这些属性对非重定的内联元素没有影响。

但是“无效”并不意味着这些属性不存在。具体而言，它们确实是出于继承目的而存在的。考虑此示例：

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>

我们可以看到带有“两个”类的B元素继承了内联，非重取跨度元素的余量和底部属性，并且由于该B元素是inline-block，所以保证金顶和底部确实会导致布局差异。如果跨度不存在边缘顶部和底部属性，那将是不可能的。

It is claimed in the book that an inline element has complete padding
properties but no margin-top/button properties, only margin-left/right
properties.
My first question is, where can I find this as an official statement?

You won't, because it isn't quite true. In the box model it says that for margin-top and margin-bottom:

These properties have no effect on non-replaced inline elements.

But "no effect" does not mean that the properties don't exist. Specifically, they do exist for the purposes of inheritance. Consider this example:

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>

We can see that the b element with class "two" inherits the margin top and bottom properties of the inline, non-replaced span element, and since that b element is inline-block, the margin-top and bottom do cause a layout difference. That would be impossible if the margin-top and bottom properties did not exist on the span.

回复收藏 0 原文

关于从前 2025-02-13 13:16:21

我的第一个问题是，我在哪里可以找到它作为官方声明？
我在这里发现，如果保证金顶/底部设置为“自动”，则将其设置
到'0'。但是与说“保证金顶/博顿的说法”并没有什么不同
不适用于内联元素？

在8.1 Box Model Spec中/tr/rec-css2/box.html#propdef-margin ）“边缘边缘围绕着盒子边缘。如果边距具有0宽度（高度），则保证边缘与边框边缘相同。”

在页面中，您链接了10.6.1““高度”属性不适用，但框的高度由'Line-Height'属性给出。”因此，由于高度不适用，因此边缘边缘与边框边缘相同。

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

与上述相同的原因。 “盒子的高度由'线路高'属性给出。该强元素的高度是由line-Height设置的，因为它没有作为块或内线块元素的高度参考。我很确定您是否将其置于内联块属性，因为模型中的块具有高度。

回复收藏 0 原文

泪意 2025-02-13 13:16:21

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

尝试替换保证金 padding at strong element，添加display> display：inline-块 <代码>强样式

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

but for some reason it has no effect on the surrounding text

Try substituting margin for padding at strong element, adding display:inline-block to strong style

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

回复收藏 0 原文

~没有更多了~