html+css 图片/文字与外层外边框底部间隙bug





    
    
    Document



    bug问题:外层div的border线条底部与图片底部出现有几像素的缝隙,
    出现bug的原因:vertical-align: baseline;垂直居中的属性默认是底部对齐,而图片/文字的有顶线、中线、基线、底线四条线构成,基线与底线有之间还有内容,会撑开外层div
    
解决方式1:vertical-align: top; 垂直居中属性改为其他对齐方式
解决方式2:将图片、文字修改为块状元素

效果图:

html+css 图片/文字与外层外边框底部间隙bug_第1张图片

html+css 图片/文字与外层外边框底部间隙bug_第2张图片

你可能感兴趣的:(前端)