Question

以下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>

给出以下result。如您所见，图像下方有一个额外的填充像素。这是设计的吗？我的错误？一个bug？无论哪种方式，我发现它非常烦人，并希望知道如何摆脱它。感谢。

Answer 1

在bugzilla向Mats发信用here。

img{margin-bottom:-5px}

应该是

img{vertical-align:bottom}

w3.css中的

使用w3.css w3-row时的额外像素

1 个答案: