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

水深无声 2022-08-23 03:59 180阅读 0赞

示例: [http://codepen.io/GitKou/pen/NrGbXP][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_segmentfault.com_q_1010000000441100]
 *  [https://www.zhihu.com/question/21558138][https_www.zhihu.com_question_21558138]
 *  [https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align][https_developer.mozilla.org_zh-CN_docs_Web_CSS_vertical-align]
 *  [http://www.html-js.com/article/1758][http_www.html-js.com_article_1758]

[http_codepen.io_GitKou_pen_NrGbXP]: http://codepen.io/GitKou/pen/NrGbXP
[https_segmentfault.com_q_1010000000441100]: https://segmentfault.com/q/1010000000441100
[https_www.zhihu.com_question_21558138]: https://www.zhihu.com/question/21558138
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_vertical-align]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
[http_www.html-js.com_article_1758]: http://www.html-js.com/article/1758