子填充位于父元素之外 [英] Child padding falls outside the parent element

问题描述

对子元素应用填充会使子元素在其包含的父元素的边界上绘制.您能在边距，填充和内容宽度中解释大小注意事项吗?

Applying padding to child elements is making the child draw over the boundaries of its containing parent. Can you please explain the size consideration in margin, padding and content width.

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

If we increase the padding why don't the parent also resize to the accumulative size of all the children considering the child's padding also?

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

为解决此问题，我们需要考虑哪些编码实践??

What are coding practices that we need to consider to over come this problem.?

好的，我得到了很多行之有效的答案.谁能解释基于子元素的父尺寸计算.在计算父母的总尺寸时要考虑的孩子的特征是什么?什么时候考虑整个填充?

Ok guys I got lot answers that do work. Can anybody explain the parent size calculation based on child elements. what are characteristics of the child that are considered while calculating the encompassing parent's size. when the whole padding is considered when it not considered ?

推荐答案

孩子重画父母边界的原因是，孩子是< a> 类型的标签，默认值为 display:inline (您可以查看是否使用chrome开发人员工具并在计算样式下查看).内联元素显示为一行文本..因此，内联元素对待宽度和高度的方式与所有块均大不相同(例如，div默认为块).

the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type <a> which by default is display:inline (you can see if that you go in chrome developer tools and see under computed style). an inline element displays like a line of text.. so the way it treats width and height and all that is very different than a block (a div for example is a block by default).

也就是说，如果将a的显示设置更改为 display:inline-block ，则可以保留< a> 的内联属性，但要保留在同时还获得了块属性，即具有其父节点可以识别的填充，宽度和高度，然后展开容纳它.

that being said, if you change the display setting of a to display:inline-block you get to keep the inline properties of <a> but at the same time also get the block properties, namely having a padding and width and height that is recognised by its parent node, which will then expand to accommodate it.

因此，没有任何最佳实践.唯一的最佳实践是了解每个显示属性的含义(即 inline 与 block 与 inline-block )

So there aren't any best practices about this. The only best practice is to understand what each display property mean (ie inline vs block vs inline-block) and put it to its proper use.

这篇关于子填充位于父元素之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！