CSS--内联元素的padding、margin以及向块元素转换

行内非替换元素（文本）

• 行内框的高度由line-height决定
• margin-left \ right、padding-left \ right会改变布局，使文字左移或者右移。
• margin-top \ margin-bottom 和 padding-top \ padding-bottom 和 border-top \ border-bottom不会改变布局，也不会改变行内框的高度。
  • 但是在设置了border的情况下，会显示出来，可能会遮盖上下文本
  • 在background有颜色的情况下，如果设置了padding-top\padding-bottom\padding-left\padding-right，会被显示出来，可能出现遮盖上下文本，因为默认background-clip : border-box。
  • 例如：下图空白部分是margin:40px，但只显示了左右空白，上下不受影响，pading:20px，虽然上下左右的padding都在背景颜色的作用下显示出来，但显然padding-top与padding-bottom并没有影响相邻行文字的布局。

![B8KSH]7]%U]`%Y$NSOO_GO1.png](https://img.haomeiwen.com/i4101739/13d91d54ad38de6a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 行内元素的边框（border）【注意不是行内框也不是行框，只是border属性】，边框边界围绕的是内容区（font-size决定）而不是行内框（line-height决定）。

行内替换元素（img）

• line-height对替换元素无效
• 行内框的高度由height、上下方向的margin\padding\border决定
• line-height对图像的行内框没有任何影响，也不会随着行内框的增大而改变。
• 但由于vertical-align的计算依赖于line-height，所以还是要设置line-height

inline-block元素

• 其基线就是元素里面最后一行内联元素的基线。如果inline-block里面没有inline内联元素，或者overflow不是visible（默认是visible,即被修改过后），则该元素的基线就是其margin底边缘。

可以使内联元素设置宽高的行为：

• 定位类：（这三种如果没有设置，会自动缩减为适应内容的宽高，并且这三者都会形成BFC环境）
• float:left
• position:absolute
• position:fixed

• 类型控制：
• display:block
• display:inline-block
• display: table-cell;
• display:flex