Geek Answers Handbook

1px margin between two vertically arranged divs in Chrome (please read more)

In the Chrome browser on Nexus 7 and on HTC Android, I see a 1px field between the top and bottom div. On my Nexus 5 and on the desktop, it does not appear. If I use Chrome Dev Tools and turn on emulation mode, I see a white line. I can solve the problem by adding a negative -1px margin and 1px padding to compensate, however, I'm trying to understand why this happens in the first place.

QUESTION: Can someone explain why this happens, that is, what CSS rules are used?

<!DOCTYPE html>
<html>
<head>
    <title>Test margins</title>

    <style type="text/css">
        .top {
            background-color: black;
            height: 50px;
        }

        .bottom {
            background-color: black;
            height: 50px;
            /*margin-top: -1px;*/ /* Potential fix I don't want to use. */
            /*padding-bottom: 1px;*/
        }
    </style>

</head>
<body>

<div class="top">
</div>
<div class="bottom">
</div>

</body>
</html>

Screen shot of problem

+4
source share
2 answers

- (1 CSS 1,25 1,33 )? , - <meta name="viewport" content="width=640"> (3 FullHD CSS 2 CSS 1280x720).

+2

border-box

div {
    box-sizing: border-box;
    width: 50%;
    float: left;
}
0

More articles:


All Articles