HTML：行内元素设置内外边距探究

我们一般认为，行内元素的宽度可以设置，高度由内容决定; 行内元素的盒子水平方向的内外边距生效，垂直方向的内外边距不生效 （1）清除样式，并给行内元素的盒子设置一个内外边距

   * {
        padding: 0;
        margin: 0;
    }

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

    p {
        border: 2px solid red;
    }

    span {
        /* padding: 10px; */
        /* margin: 10px; */
        background: yellow;
        line-height: 20px;
    }
    

如图验证效果显示： 1设置的内边距上下左右均生效，但是上下内边距并没有撑开盒子 2设置的外边距只有水平方向生效，垂直方向直接不生效