css子填充使得它可以绘制出父母的一面 [英] css child padding makes it draw out side the parent

问题描述

对子元素应用填充会使子元素绘制其包含的父元素的边界。你能解释尺寸的考虑边际，填充和内容宽度。

如果我们增加填充为什么父母也没有重新大小的累计大小的所有考虑孩子填充大小的孩子也。

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

 < div> 
< ul> 
< li>< a> srikanth< / a> 
< / li> 
< li>< a> sunkist< / a> 
< / li> 
< li>< a>星期日< / a> 
< / li> 
< / ul> 
< / div> 
 
 
 
 div {
 margin-top：90px; 
 margin-left：90px; 
背景颜色：＃676896; 
} 
 ul {
 list-style-type：none; 
} 
 ul li {
 display：inline-block; 
} 
 a {
 background-color：＃c34567; 
 padding：10px 10px 10px 10px; 
} 
  

什么是编码实践，我们需要考虑以解决这个问题。

好吧，我得到了很多可以解决问题的答案。任何人都可以根据子元素解释父代大小的计算。在计算包含父母的大小时，考虑孩子的特征是什么。当不考虑整个填充时？解析方案

小孩透支父母的边界的原因是因为child是< a> 类型的标签，默认情况下是 display：inline （你可以看到你去铬开发工具，并看到计算风格下）。一个内联元素显示为一行文本..所以它处理宽度和高度的方式和所有与块非常不同的方式（例如，div是默认情况下的块）。

$ b如果你改变a的显示设置为 display：inline-block ，你可以保持内联属性 < a> ，但同时也获得块属性，即具有由其父节点识别的填充和宽度和高度，然后expand 以适应它。

所以没有关于这方面的任何最佳实践。唯一的最佳做法是了解每个显示属性的含义（即 inline vs block vs inline-block ）并将其正确使用。

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 re size to the accumulative size of all the childs considering the childs padding size 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 ?

解决方案

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).

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.

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.

这篇关于css子填充使得它可以绘制出父母的一面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！