前端CSS基础9（CSS布局小技巧，常遇到的空白问题）

CSS布局小技巧

1.行内元素、行内块元素,可以被父元素当做文本处理。

• 即:可以像处理文本对齐一样，去处理:行内、行内块在父元素中的对齐。 例如: text-align、 line-height 、text-indent 等。

2.如何让子元素,在父亲中水平居中：

• 若子元素为块元素，给父元素加上: margin:0 auto; 。
• 若子元素为行内元素、行内块元素，给父元素加上: text-align:center 。
  3.如何让子元素，在父亲中垂直居中:
• 若子元素为块元素，给子元素加上: margin-top ，值为: (父元素content -子元素盒子总高) /2。
• 若子元素为行内元素、行内块元素:让父元素的height = line-height ,每个子元素都加上: vertical-align :middle;。
• 补充:若想绝对垂直居中，父元素font-size设置为0。

元素之间的空白问题

产生的原因：
行内元素和行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决办法：

1. 去掉换行和空格
2. 给父元素设置font-size：0，再给需要显示文字的元素，单独的设置字体的大小。（推荐）

行内块的幽灵空白问题

**产生原因: **

• 行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

解决方案:

1. 方案一:给行行内块设置vertical ，值不为baseline 即可，设置为middel、 bottom、top均可。
2. 方案二:若父元素中只有一张图片，设置图片为display:block。
3. 方案三:给父元素设置font-size: 0。如果该行内块内部还有文本，则需单独设置font-size。