32

对子元素应用填充是使子元素在其包含父元素的边界上绘制。你能解释一下边距、内边距和内容宽度的大小考虑吗？

如果我们增加填充，为什么父母不考虑孩子的填充也调整到所有孩子的累积大小？

http://jsfiddle.net/NkXUW/4/

 <div>
       <ul>
          <li><a>srikanth</a>
           </li>
           <li><a>sunkist</a>
        </li>
        <li><a>sunday</a>
        </li>
    </ul>
    </div>



div {
     margin-top:90px;
    margin-left:90px;
    background-color:#676896;
   }
   ul {
     list-style-type:none;
   }
    ul li {
    display:inline-block;
   }
   a {
    background-color:#c34567;
    padding:10px 10px 10px 10px;
   }

为了克服这个问题，我们需要考虑哪些编码实践。

好吧，伙计们，我得到了很多有效的答案。谁能解释基于子元素的父大小计算。在计算包含父母的大小时，考虑了孩子的哪些特征。什么时候考虑整个填充，什么时候不考虑？

4

5 回答 5

51

孩子过度绘制父母边界的原因是因为孩子是一个类型的标签，<a>默认情况下是display:inline（你可以看看你是否进入chrome开发者工具并查看计算样式）。内联元素显示为一行文本。所以它处理宽度和高度的方式以及所有这些都与块非常不同（例如，div 默认情况下是块）。

话虽如此，如果您将 a 的显示设置更改为display:inline-block您可以保留的内联属性，<a>但同时也可以获得块属性，即具有其父节点识别的填充和宽度和高度，这将然后扩展以适应它。

因此，没有任何关于此的最佳实践。唯一的最佳实践是了解每个显示属性的含义（即inlinevs blockvs inline-block）并正确使用它。

于 2013-03-15T05:01:49.517 回答
11

采用display:inline-block;

a {
    background-color: #C34567;
    display: inline-block;
    padding: 10px;
}

看演示

  • 内联元素之前或之后没有换行符，并且它可以容忍它旁边的 HTML 元素。
  • 块元素的上下都有一些空格，并且不允许在其旁边有任何 HTML 元素。
  • inline-block 元素作为 inline 元素放置（与相邻内容在同一行），但它的行为类似于块元素。

http://www.w3schools.com/cssref/pr_class_display.asp

于 2013-03-15T04:57:47.267 回答
3

无需更改a标签即可解决。只需将overflow: hidden;属性添加到div元素。

div {
  margin-top:90px;
  margin-left:90px;
  background-color:#676896;
  overflow: hidden; /*expends its height if not fixed*/
}

在这里更新小提琴：http: //jsfiddle.net/NkXUW/52/

于 2017-05-18T05:33:04.570 回答
2

您必须根据需要添加display: block;到<a>元素以扩展父级。看到这个小提琴

于 2013-03-15T08:47:35.870 回答
0

关于边距和填充之间的差异，请阅读此内容也许对您有所帮助

我不认为这是正确float的div wrapper

工作演示

div {
    float:left;
    margin-top:90px;
    margin-left:90px;
    background-color:#676896;
}

希望这对你有帮助..

于 2013-03-15T04:58:08.787 回答