块级元素和行内元素的区别 (block vs. inline)

Posted 2020-09-01 诚❤️茹羿

块级元素 (display: block)

• 独占一行，多个block元素会各自新起一行。默认情况下，block元素的宽度会填满父元素的宽度。
• 可以设置width, height属性。但是，即使设置了width属性，仍然独占一行。
• 可以设置margin, padding。

行内元素 (display: inline)

html元素分为替换元素和非替换元素。

• 替换元素是指浏览器根据其标签的元素与属性来判断显示具体的内容。例如img，input等。
• HTML中大多数元素是不可替换元素，他们将内容直接告诉浏览器。

• 宽度随内容变化而变化。
• 多个inline元素会排在同一行里，直到一行排不下，才会换一行。
• 可以设置水平方向上的margin, padding，并且会影响布局。
• width, height属性无效。(特指非替换元素，替换元素有效)
• margin-top, margin-bottom属性无效。(特指非替换元素，替换元素有效)
• padding-top, padding-bottom设置背景后可以看见内边距区域有增加，对于行内非替换元素，不会影响行高，不会撑开父元素。而对于替换元素，则撑开了父元素。

display: inline-block

该属性使得HTML元素的特点介于inline与block之间：

• 宽度随内容决定。
• 可以设置width, height, margin, padding。