<img>元素底部为何有空白

来源：互联网发布：matlab矩阵中字母编辑：程序博客网时间：2024/05/17 07:25

示例: http://codepen.io/GitKou/pen/NrGbXP

块级元素内部默认有行框，行框撑高了块级元素。img和其他块级元素并列的时候，由于img默认是display:inline-block，因此也会产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素。

取值 (行内(inline)元素)多数值是相对于父元素：baseline元素基线与父元素的基线对齐。一些 可替换元素，比如 <textarea> ， HTML标准没有说明它的基线，这意味着使用这个关键字，各浏览器表现可能不一样。sub元素基线与父元素的下标基线对齐。super元素基线与父元素的上标基线对齐。text-top元素顶端与父元素字体的顶端对齐。text-bottom元素底端与父元素字体的底端对齐。middle元素中线与父元素的小写x中线对齐。<length>元素基线超过父元素的基线指定高度。可以取负值。<percentage>同 <length> , 百分比相对于 line-height 。下面两个属性不像上面的属性相对于父元素，而是相对于整行：top 元素及其后代的顶端与整行的顶端对齐。bottom元素及其后代的底端与整行的底端对齐。如果元素没有基线baseline，则以它的外边距的下边缘为基线。取值 (table-cell元素)baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)与同行单元格的基线对齐。top单元格的内边距的上边缘与行的顶端对齐。middle单元格垂直居中。bottom单元格的内边距的下边缘与行的底端对齐。可以取负值。

https://segmentfault.com/q/1010000000441100
https://www.zhihu.com/question/21558138
https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
http://www.html-js.com/article/1758

0 0