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

前端之家收集整理的这篇文章主要介绍了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内嵌块),并将其置于正确的用途之中.

猜你在找的HTML相关文章