inline元素与inline-block元素的margin与padding测试


目录

    • 测试padding
        • inline元素padding测试部分
        • inline-block元素的padding测试部分
    • 测试margin
        • inline元素的margin测试
        • inline-block元素的margin测试
    • 总结

测试padding

inline元素padding测试部分

先上代码(注意以下所有代码只要为特殊声明，均给 * 的css选择器添加了margin:0与padding:0)：

1
2
3
4
5
6
7
8
9
<span style="background-color: darkcyan;">我是inline元素</span>
<span style="background-color: darkcyan;padding-left: 50px;">我的padding-left是50px</span>
<span style="background-color: darkcyan;padding-right:50px;">我的padding-right是50px</span>
<span style="background-color: darkcyan;padding-top:150px;">我的padding-top是150px</span>
<span style="background-color: darkcyan;padding-bottom:150px;">我的padding-bottom是150px</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意：这里每个span元素之间的空白是因为我每个span标签单独占一行，浏览器会默认把这个换行识别为一个空格，不过对我们的测试影响不大。

我们可以看见padding-left,padding-right对inline元素的确有影响，而padding-top与padding-bottom也对inline元素有影响，但我们再多添加几个测试标签试试(我是测试的元素)。

在这里插入图片描述
你会发现它对布局完全没有影响，只是有一定的作用而已，但不对其他元素造成影响。

这里引用一张其他博客的图片：
在这里插入图片描述

inline-block元素的padding测试部分

代码与上面一模一样，只是吧所有span的display属性设置为了inline-bolck：

效果图：
在这里插入图片描述
很明显，所有padding均可以正常使用。

测试margin

inline元素的margin测试

还是先上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<span style="background-color: darkcyan;">我是inline元素</span>
<span style="background-color: darkcyan;margin-left: 50px;">我的margin-left是50px</span>
<span style="background-color: darkcyan;margin-right:50px;">我的margin-right是50px</span>
<span style="background-color: darkcyan;margin-top:150px;">我的margin-top是150px</span>
<span style="background-color: darkcyan;margin-bottom:150px;">我的margin-bottom是150px</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>
<span style="background-color: darkcyan;">我是测试的元素</span>

在这里插入图片描述在这里插入图片描述
我们发现margin-top与margin-bottom一点作用没有了，元素高度还是保持原本不改变。

inline-block元素的margin测试

代码同上，只是把所有span元素display属性设置为inline-block在这里插入图片描述
我们发现所有属性均有效果，因为垂直对齐的原因，所以其他元素也跟着同行的元素进行了margin-top和margin-bottom的偏移。

总结

padding-left/pading-right padding-top/padding-bottom margin-left/margin-right margin-top/margin-bottom
inline元素 正常使用 不对其他元素产生影响，但会存在一定效果 正常使用 无效
inline-block元素 正常使用 正常使用 正常使用 正常使用