【CSS】inline和block那些事儿

说下行内元素和块级元素的区别？

这是今天看到一道面试题，围绕这道面试题，我总结一下关于inline和block的一些特性。

---

inline

1. 设置宽高无效。

这个基本上都知道，inline的高度和宽度是由元素里的内容撑开的，设置height和width不影响inline实际宽高。

2. 设置上下margin无效

在行内元素中，设置margin-top和margin-bottom无效。虽然margin-left和margin-right有效，但不能使用margin: 0 auto 来居中，想要居中还是得在父元素中设置text-align: center 。

3. 设置上下padding无效

和margin一样，设置行内元素的padding-top和padding-bottom无效，padding-left和padding-right有效。但是与margin的区别是，padding会影响行内元素的background-color。点击这里查看padding和margin的区别。

行内元素的margin和padding

图片中可以看到，设置padding的行内元素background被撑开，而margin却没有。虽然padding撑开了行内元素的background，但是并没有影响它的实际高度，可以看到下面的div没有拉开距离。

4. 可设置line-height影响上下间距

高度，margin，padding都无法影响inline的上下间距。但是可以通过设置它的line-height来影响上下间距。这里又有一个小tips，就是虽然line-height可以影响上下间距，但是无法撑开background。可以点击这里查看inline设置line-height的效果。

inline和block设置line-height的效果

从图中可以看到，设置line-height后的行内元素，上下间距虽然被拉开了，但是background却没有变化。

5. 在行内元素中包含一个块级元素会有意想不到的问题

在行内元素中包含一个块级元素可能出现一些比较神奇的问题，所以尽量不要在行内元素中包含块级元素。点击这里查看行内元素中包含一个块级元素效果。

---

block

块级元素就比较简单了，没有什么奇奇怪怪的东西。宽高，margin，padding都可以正常使用。与行内元素不同的是，块级元素会占据一行（即使设置的宽度没有撑满父元素宽度）。而且块级元素可以通过margin: 0 auto; 来水平居中。

---

后记

关于inline和block我大概就总结了这些，如果有什么不详细，或者有问题欢迎留言讨论和补充。

~(～￣▽￣)～