你的位置:首页 > 网页设计

[网页设计]块级标签包含行内标签底部出现3px间隔的解决办法


当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔;

代码如下:

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    #box{      background: red;    }  </style></head><body>  <div id='box'>    <img src="test.png">  </div></body></html>

显示效果如下:

解决办法有三种:

  1.设置div{ font-size: 0};将外层块级标签的font-size设置为0;

  2.设置img{ display: block};将内层行内标签的display设置为block,将其变为块级标签;

  3.设置img{ vertical-align:top;};将内层行内标签的vertical-align设置为top;