块元素内span设置padding

最新推荐文章于 2022-08-10 17:12:28 发布

原创最新推荐文章于 2022-08-10 17:12:28 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

本文解析了当span元素设置内联padding时，为何不会撑开其包含的块级元素p，揭示了内联盒子模型的特性，即padding仅影响元素外观，不影响布局结构。

当块元素不设置高度，子span元素设置padding时，高度会溢出块元素。

     <style>
        .spancontainer {
            background-color: #c3e7d5;

        }
        span {
            padding: 10px;
            font-size: 20px;
            background-color: bisque;
        }


    </style>
    <p style=" border: rgb(196, 76, 76) 1px solid;">
       <span class="spancontainer">a
        </span>
    </p>

span_a的上下左右被撑开,但是垂直方向上却溢出块元素

行内元素设置padding

行内元素使用内联盒子，设置的padding，margin对垂直方向上的块级盒子或内联盒子不生效。但是对内部文字还是会生效。所以此时a坐在的span垂直方向上的高度计算是:a所占的像素+padding > p.width
但是为什么没有把p元素撑开而是溢出了?
因为内联盒子padding不会把垂直其他元素推开，不影响布局，只影响显示。