【CSS基础】关于行内元素的内外边距问题

对于行内元素的内外边距问题有时候分的不是很清晰,特此做了一个小实验加深印象:
首先整体html结构为:

 <div class="container">
        <p>
            <span>SPAN1</span>
            <span>SPAN2</span>
        </p>
        <p>段落2</p>
    </div>

层叠样式表为:

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            margin: 0 auto;
            text-align: center;
        }

        p {
            border: 2px solid #000000;
        }

        span {
            background: blue;
        }
   </style>

1、对行内元素设置padding=10px;

        span {
            padding: 10px;
            background: blue;
        }

效果如下图,left、right和bottom均体现了效果但没有撑开p标签,且padding-top没有如预期般撑开span:
在这里插入图片描述

如果给外层容器添加一个外边距,则发现SPAN的padding-top体现了效果:

       .container {
            width: 400px;
            margin: 20px auto;
            text-align: center;
        }

在这里插入图片描述

2、对行内元素设置margin=10px;

  span {
            margin: 50px;
            background: blue;
        }

结果为左右有效果,上下无效果并且没有撑开p标签
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页