0

为什么：

<html>
  <head>
  <style>
    #categorizer { border-style: solid; border-width: 10px; 
                   border-color: blue; padding: 50px }
    #children { color: green; background-color: yellow }
    #parents { color: blue; background-color: #ccc }
  </style>
  </head>
  <body>
    <span id="categorizer">
      <span id="children">
        <span class="child">c11111</span>
        <span class="child">c22222</span>
        <span class="child">c33333</span>
        <span class="child">c44444</span>
        <span class="child">c55555</span>
      </span>
      <span id="parents">
        <span class="parent">pAAA</span>
        <span class="parent">pBBB</span>
      </span>
    </span>
  </body>
</html>

只给我三个边界边，即

在此处输入图像描述

4

2 回答 2

4

正如 Cody Guldner 在他的评论中暗示的那样，你span的 s 是内联元素，而不是块元素。因此，填充不会改变文本的垂直间距；它只是在 text 周围添加填充，然后将边框添加到填充的边缘。正是这种填充将顶部的蓝色边框推到了视线之外。

于 2013-04-07T14:58:40.520 回答
1

您还可以将 display:block 添加到分类器中

#categorizer { border-style: solid; border-width: 10px; 
               border-color: blue; padding:50px; display:block; }
于 2013-04-07T15:07:45.247 回答