CODEWITHSUNDEEP
javascripthtmlcsswhitespace
Samuel Ayres
Samuel Ayres

Reputation: 33

Eliminating 1px Space Between Two Inline Block DIVs (Already Tried Standard Solutions)

I can't get the 1px of white space between the two DIVs on the home page to disappear. When I resize the window, it'll sometimes vanish for a quick moment. But that does me no good on mobile or initial load.

Does anyone have any thoughts on how to kill the white line?!

Upvotes: 1

Views: 874

Answers (1)

cam
cam

Reputation: 3624

This is happening because the width of the viewport width can be an odd number of pixels (which cant be divided equally) and so there is a sub-pixel rendering issue (the white line you're seeing) specifically with display: table and display: table-cell.

I was able to remove the white line by changing the parent container to display: flex and the child to display: block

CSS

.splash-cont {
    width: 100%;
    display: flex;
}

.splash-bg {
    width: 50%;
    height: 100vh;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

Upvotes: 1

Related Questions