html - 子内边距位于父元素之外

Question

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

如果我们增加内边距，为什么父级不也考虑子级的内边距调整到所有子级的累积大小？

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;
   }

我们需要考虑哪些编码实践来解决这个问题？

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

Answer 1

子项 overdraw 父项边界的原因是因为子项是 <a> 类型的标签默认情况下是 display:inline (您可以查看是否进入 chrome 开发人员工具并查看计算样式)。内联元素显示为一行文本......因此它处理宽度和高度的方式以及所有与 block 非常不同的方式(例如 div 默认情况下是 block )。

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

因此没有关于此的任何最佳实践。唯一的最佳做法是了解每个显示属性的含义(即 inline 与 block 与 inline-block )并正确使用它。