Extra pixels when using w3.css w3-row

Question

The following 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.

img{margin-bottom:-5px}

should be

img{vertical-align:bottom}

in w3.css

Extra pixels when using w3.css w3-row

Question

1 answers

solution1
0 2016-12-15 15:46:28

Extra pixels when using w3.css w3-row

Question

1 answers

solution1 0 2016-12-15 15:46:28

solution1
0 2016-12-15 15:46:28