HTML - 你知道块元素和行内元素都有哪些区别吗

难度级别：初级及以上                                 提问概率：70% 

我们知道，HTML标签元素有块元素和行内元素，他们的display属性值默认是block和inline。两个块元素默认会产生换行显示的效果，而两个行内元素会显示为水平横向排列的效果。除此之外，他们还有哪些区别呢？

首先在HTML语义化层面上，块元素的自身定义就是一个容器，它的内部可以容纳其他块元素和行内元素；而行内元素自身的定义是用来容纳少量文本的，最多在其内部再添加一些行内元素；但事有例外，在开发场景中，例如商品列表页，用户点击每个商品都是可以跳转的，这就需要在整个商品区域外部布局一个a标签。

其次在宽高设置上，块元素由于自身定位原因，可以自由设置宽高，并且如果自身没有宽度的话，会自动继承父元素的宽度；而行内元素默认情况下是不能设置宽高的，即便设置了line-height样式属性，也不能改变自身的高度，但是却可以撑起父元素的高度。

在margin与padding设置方面上，块元素不用多说，都是完美支持的，比较有疑惑的就是行内元素，我们先只在页面中布局9个行内元素span，看下面代码和图展示效果 

HTML代码：
<div class="box">
<span>群众</span>
<span>群众</span>
<span>群众</span>
<br/>
<span>群众</span>
<span class="span-ele">主演</span>
<span>群众</span>
<br/>
<span>群众</span>
<span>群众</span>
<span>群众</span>
</div>

css代码：
<style>
.box {
margin: 100px;
}
span {
border: 1px solid black;
}
.span-ele {
border: 1px solid red;
}
</style>

接下来，我们为“主演”span标签设置margin和padding样式，看下面的代码和图效果 

css代码：
<style>
.box {
margin: 100px;
}
span {
border: 1px solid black;
}
.span-ele {
margin: 20px;
border: 1px solid red;
padding: 20px;
}
</style>

通过以上代码和效果图可以看到，margin-left和margin-right会起作用，会改变布局，与周围元素产生外边距，而margin-top和margin-bottom并没有生效，也就不涉及改变布局的问题了；但padding方面，可以看出，其实padding这个内填充属性，4个方向都起作用了，但是未改变周围布局。

但互联网上有很多文章指出行内元素的padding上下方向设置是无效的，这也导致很多求职者读完文章并未实践，自己明明下了功夫去刷题，面试的时候自我感觉也回答的很完美，结果不知不觉陷入了误区却不知道。

刷题思考

    这道题的考察的是求职者日常工作中，对于常用知识点的总结是否到位。明明每天都在使用的知识点，但因为缺乏总结，导致面试回答的内容总是不成体系，或是缺东少西。尤其是行内元素对于margin和padding的设置，更是考察了日常工作中是否细心留意了这个小特性。其实你说这道题难吗？当然不难，但却是一道非常高频次的题目。

类似考点

    这道题很明显是在考察对于块元素和行内元素知识点的掌握情况，所以与之类似的考点就很明确了，例如请举例说明你知道的块元素、行内元素以及内联块元素；例如块元素和行内元素如何互相转换；例如行内元素什么情况下可以容纳块元素等。