【css】---img 去掉 下边三像素方法

 

img 去掉 下边三像素方法

应用于垂直居中和放下边的文字紧贴着图片

 

img产生3像素的原因
原因在于块级元素内部默认有行框，行框撑高了块级元素。img和其他块级元素并列的时候，由于img默认是display:inline-block，因此也会产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素。这也是为何把图片添加上display:block，或者父层级font-size、line-height能够解决这个的原因。

 

 

 

因为图片默认是行内元素，行内元素默认是baseline对齐的，和底部会有一段距离因为图片默认是行内元素，行内元素默认是baseline对齐的，和底部会有一段距离

 

 

因为图片默认是行内元素，行内元素默认是baseline对齐的，和底部会有一段距离

上图，绿色线标出了top、text-top、middle、baseline、text-bottom、bottom相对应的位置。

当div的高度和文字的高度是一样的时候，设置vertical-align属性为top、text-top或text-bottom、bottom，效果是一样的。

当vertical-align属性为top、text-top时候，图片顶部和线对齐

当vertical-align属性为middle时候，图片中间和线对齐

当vertical-align属性为baseline、text-bottom、bottom时候，图片底部和线对齐

 

 

20190506  老师教的解决垂直居中的方法

<!--方法1：利用display:table-cell-->

dt{

width:199px;

height: 165px;

border-bottom: 1px solid #CECECE;

background: pink;

text-align: center;

vertical-align: middle;

display:table-cell;

/*font-size: 0;*/

line-height: 0;

}

总结：给容器（父元素）转化为table-cell，然后设计父元素行高/字号设置为0

例如：给父元素写，display：table-cell，line-height: 0;

缺点：1当子元素的宽度大于父元素的时候，会强制缩小自己的宽度，以适应父元素的尺寸；

 2、一旦元素转换为table-cell就不能设置margin