行内元素的内外边距是否有用

测试行内元素的左右内外边距

 div{
            width: 230px;  
            height: 200px;
            background-color: aqua;//包含行内元素的块元素的背景颜色
   }
        span{
            margin-left: 20px; //左外边距
            margin-right: 20px; //右外边距
            padding-left: 20px;//左外边距
            padding-right: 20px;//右外边距
          background-color: blue;  //背景颜色
        }

div包含span span是行内元素，给span设置左右内外边距，测试是否有效。

测试效果图

这样可以看出来行内元素的左右内外边距都有效。

测试行内元素的上下内外边距

  div{
           
            margin-top: 50px;
            width: 230px;
            height: 200px;
            background-color: aqua;
        }
        span{
            margin-top: 20px;//上外边距
            margin-bottom: 20px;//下外边距
            padding-top: 20px;//上内边距
            padding-bottom: 20px;//下内边距
          background-color: blue;
        }

div包含span span是行内元素，给span设置上下内外边距，测试是否有效。

测试效果图

从效果图可以看出来，行内元素的上下外边距没有效果，行内元素的上下内边距有视觉效果

切记行内元素的上下内边距只有视觉效果