css子填充使它抽出父母的一面

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

我们需要考虑哪些编码实践才能解决这个问题.

好吧,我有很多答案可行.任何人都可以根据子元素解释父级大小计算.在计算包含父母的大小时考虑的孩子的特征是什么.什么时候不考虑整个填充？

Answer 1

孩子过度绘制父母边界的原因是因为孩子是一个类型的标签,<a>默认情况下display:inline(你可以看看你是否使用chrome开发人员工具并在计算机样式下查看).内联元素显示为一行文本..所以它处理宽度和高度的方式和所有与块非常不同(例如div是一个默认的块).

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

所以没有关于此的最佳实践.唯一的最佳做法是了解每个显示属性的含义(即inlinevs blockvs inline-block)并将其正确使用.

Answer 2

使用 display:inline-block;

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

看看演示

• 内联元素在它之前或之后没有换行符,并且它允许旁边的HTML元素.
• 块元素在其上方和下方具有一些空格,并且不允许其旁边的任何HTML元素.
• 内联块元素被放置为内联元素(与相邻内容在同一行上),但它表现为块元素.

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