行内元素与行内块元素的区别

在最近的项目中。出现了原来已经设置溢出隐藏的元素却又溢出了的问题。 经过查证原来是用来做父元素的<a>变成了<button>。（这是一个封装好的组件。检测到有效href就渲染a否则就是button。） 这也引出一个关于行内元素和行内块元素的问题。

行内元素也就是display:inline的元素，最典型的是<a>标签。

行内块元素就是display:inline-block的元素，典型的有input。

请看下图

这图很清楚的表明常见的三种元素显示类型。

行内元素

• 只有设置左右的margin和padding。
• 不能设置高宽，它的高度取决于内部文字的行高。宽度取决于内部文字的多少。

行内块元素和块级元素的属性基本一致。可以设高宽、边距。不同在于它允许左右存在元素。而块级元素就算只有1px也不允许有元素和它共享一行。

那么如果它们内嵌块级元素会怎么样呢，html结构如下

<div>
    <a>
       <div><div>
    </a>
</div>
复制代码

我们可以改变里面的div的宽度可以看出a标签的宽度是不随着子元素的宽度变化而变化的，一直与自己的父级一致。倒是高度会随着变化。

行内块则不同，它的宽高都是随着内部块级元素的变化而变化相当于height:auto;width:auto。

这也解释我在开头遇见的问题。我给组件设置了overflow:hidden。a标签宽度随父元素，所以能生效。而<button>的宽度却随着子元素的宽度变化而变化的，它的overflow:hidden毫无用处。

结论：

• 行内元素内嵌块级元素。高度被子元素撑大，而宽度和父级一致（父级是body就是body的宽度）。
• 行内块元素内嵌块级元素。宽高都会被子元素撑大的。

参考 CSS display: inline vs inline-block [duplicate]