行内元素或行内块元素的布局问题和解决方法

3 行内元素或行内块元素在布局中的特点

3.1 文本属性作用于行内元素和行内块元素

① 让行内块元素或行内元素水平居中&＃xff08;在父元素中&＃xff09;

给行内块或行内元素的父元素设置&＃xff1a;

text-align: center;


② 让行内元素或行内块元素垂直居中&＃xff08;在父元素中&＃xff09;

给行内块或行内元素的父元素设置行高&＃xff0c;&＃xff08;父元素行高与父元素高度相等&＃xff09;

如果行内块元素中没有文字内容&＃xff0c;还要给行内块元素设置 vertical-align: center

3.2 行内元素或行内块元素之间的空白问题

① 元素之间的空白&＃xff08;左右&＃xff09;

产生原因&＃xff1a;

书写代码的时候&＃xff0c;每一行代码后面有换行符&＃xff0c;换行符被浏览器解析为空白


解决方案&＃xff1a;

1. 方案一&＃xff1a;每行代码后面不再写换行。
2. 方案二&＃xff1a;①给父元素设置字体大小为 0 ② 再单独给行内块元素设置字体大小


② 底部的空白&＃xff08;图片的幽灵空白&＃xff09;

产生原因&＃xff1a;

行内块元素默认沿着文字基线对齐&＃xff0c;幽灵空白其实是基线与底线的距离


解决方案&＃xff1a;

1. 方案一&＃xff1a; 设置父元素字体大小为 0
2. 方案二&＃xff1a; 给行内块元素设置 vertical-align&＃xff0c;值不能是baseline
3. 方案三&＃xff1a; 设置行内块元素为块级元素&＃xff0c;适合于图片的幽灵空白。