CODEWITHSUNDEEP
htmlcssgoogle-chromeborder
Pacjonek
Pacjonek

Reputation: 152

Blank space below the border on Chrome

Let's take this extremaly simple HTML/CSS code:

<html>
    <head>
        <style>
            body{
                margin:0
            }
            /* top div which height is set to 1px/5px/9px/13px...*/
            .first{
                height:5px
            }
            /* problematic atribute */
            .second.parent{
                border-top:1px solid red
            }
            /* background and height is set only to highlight my problem */
            .child{
                height:15px;
                background:black
            }
        </style>
    </head>
<body>
    <div class="first"></div>
    <div class="second parent">
        <div class="child"></div>
    </div>
</body>
</html>

Everything looks fine on Firefox: no problem on Firefox

Unfortunately on Chrome 65 there is a problem - blank space on the top of the child of the second div:

problem on Chrome

Zoomed screenshot on Chrome (look at the white color between the red border and the black background):

problem on Chrome (x2 zoom)

Do you have any idea what is the cause of my problem?

Upvotes: 1

Views: 437

Answers (1)

Ankit Singh
Ankit Singh

Reputation: 183

its browser problem but if you use Em or percentage it could help 

<html>
    <head>
        <style>
            body{
                margin:0
            }
            /* top div which height is set to 1px/5px/9px/13px...*/
            .first{
                height:0.3125em
            }
            /* problematic atribute */
            .second.parent{
                border-top:0.0625em solid red
            }
            /* background and height is set only to highlight my problem */
            .child{
                height:0.9375em;
                background:black
            }
        </style>
    </head>
<body>
    <div class="first"></div>
    <div class="second parent">
        <div class="child"></div>
    </div>
</body>
</html>

Upvotes: 1

Related Questions