测试行内元素的左右内外边距
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设置左右内外边距,测试是否有效。
测试效果图
![](https://i-blog.csdnimg.cn/blog_migrate/ebe0a12dabe1a21622129e079d9678c2.png)
这样可以看出来行内元素的左右内外边距都有效。
测试行内元素的上下内外边距
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设置上下内外边距,测试是否有效。
测试效果图
![](https://i-blog.csdnimg.cn/blog_migrate/7b6720317dbf504c15894be558b1ee81.png)
从效果图可以看出来,行内元素的上下外边距没有效果,行内元素的上下内边距有视觉效果
切记行内元素的上下内边距只有视觉效果