Question

有人能指出我的规格吗？

x-x {
  padding: 10px;
}

<x-x>
  <div>1</div>
  <div>2</div>
</x-x>

padding-left不填充
然而，填充顶部和填充底部
为什么会这样？

http://codepen.io/geoyws/pen/NNJjPV

Answer 1

您的自定义元素（<x-x>）默认为CSS initial values。因此其display值为inline。

此元素包含两个div，它们是块级元素。

由于内联框无法包装块级框，因此浏览器会在包装div之前隐式关闭<x-x>。

因此，左边距填充不起作用的原因是因为自定义元素实际上没有包裹两个div。它在第一次打开<div>之前关闭（实际上，使自定义元素和div更像兄弟姐妹）。

但是，如果在自定义元素中放置span，则填充将起作用，因为默认情况下span为display: inline，并且可以由另一个内联级别包装元素（demo）。

所有这一切都可以在开发工具中验证。突出显示自定义元素，看它是否包装div。

如规范中所述，内联级别框＆＃34;突破＆＃34;块级框：

9.2.1.1. Anonymous block boxes

当内联框包含流内块级别框时，内联框   （以及它在同一行框内的内联祖先）被打破了   块级框（以及任何连续的块级兄弟）   或者仅由可折叠的空白和/或流出来分开   元素），将内联框拆分为两个框（即使其中一个   边是空的），块级盒子的每一边都有一个。这条线   休息前和休息后的盒子都是匿名的   块框，块级框成为那些兄弟   匿名盒子。当这样的内联框受相对影响时   定位，任何产生的翻译也会影响块级别   包含在内联框中的框。

Answer 2

您已将填充设置为 xx 10px，其中显示：内联; 默认情况下，其子项的显示属性为 display：block; < / strong>所以只需将显示块添加到父级即xx元素以及填充：10px;你会得到预期的结果。

x-x { padding: 10px; display:block; }

快乐编码： - ）

内联容器的左侧填充不会填充。为什么？

2 个答案: