html – css孩子填充使它画出父母的一面

对子元素应用填充是使孩子在其包含的父项的边界上绘制.你能否解释边际,填充和内容宽度的大小问题.

如果我们增加了填充,为什么父母也不会将所有孩子的累积大小也考虑到孩子的填充大小.

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

什么是编码实践,我们需要考虑来解决这个问题.

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

解决方法

孩子超出父母边界的原因是因为孩子是< a>类型的标签.默认情况下显示:inline(你可以看到你是否在chrome开发人员工具中看到,并在计算的样式下看到).一个内联元素显示为一行文本..所以它对待宽度和高度的方式,所有这些都与块非常不同(例如,默认情况下是div).

话虽如此,如果您将显示设置更改为显示:内嵌块,则可以保留< a>的内联属性.但是同时也可以获得块属性,即具有由其父节点识别的填充和宽度和高度,然后将其加入到expand中.

所以没有关于这个的最佳做法.唯一的最佳做法是了解每个显示属性的含义(即内联vs块vs内嵌块),并将其置于正确的用途之中.

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...