使用w3.css w3行时的多余像素

Question

The following html 以下html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body class="w3-red">
    <div class="w3-main w3-content w3-padding">
         <div class="w3-row w3-blue">
             <div class="w3-quarter">
                 <img src="http://www.w3schools.com/w3images/girl_mountain.jpg" style="width:100%">
             </div>
             <div class="w3-threequarter">
                 <p>Hello World</p>
             </div>
        </div>
    </div>

</body>
</html>

gives the following result . 给出以下结果。 As you can see there is an extra pixel of padding below the image. 如您所见，图像下方有一个额外的填充像素。 Is this by design? 这是设计使然吗？ An error on my part? 我有错误吗？ A bug? 有毛病吗 Either way I find it very annoying and would love to know how to get rid of it. 无论哪种方式，我都觉得这很烦人，很想知道如何摆脱它。 Thanks. 谢谢。

Answer 1

Credit here to Mats at bugzilla. 信用这里来垫在Bugzilla的。

img{margin-bottom:-5px}

should be 应该

img{vertical-align:bottom}

in w3.css 在w3.css中

使用w3.css w3行时的多余像素

问题描述

1 个解决方案

解决方案1
0 2016-12-15 15:46:28

使用w3.css w3行时的多余像素

问题描述

1 个解决方案

解决方案1 0 2016-12-15 15:46:28

解决方案1
0 2016-12-15 15:46:28