CODEWITHSUNDEEP
htmlcss
FunnelScr
FunnelScr

Reputation: 171

Remove single pixel gap between child and parent div

Here is a simple block of code:

<style type="text/css">
.parent {
    position: relative;
    width: 75vw;
    height: 300px;
    border: 5px solid #000;
}
.child {
    width: 100%;
    height: 100px;
    background-color: #999;
}
</style>

<center>
    <div class="parent">
        <div class="child"></div>
    </div>
</center>

But, the results are different when viewed in different screen widths.

Here, the child div completely fits the parent div at a certain screen width.

enter image description here

But here, when at a different screen width, a white space of about 1px appears on both the sides of the child div.

enter image description here

How can I get rid of this white space and make sure that the child div completely fits the parent div?

Upvotes: 3

Views: 1427

Answers (4)

daGo
daGo

Reputation: 2968

This is because you are using Chrome browser. I have the same behavior with the very simple code:

        <div class="container">
            <div class="item-a">item A</div>
        </div>

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    width: 500px;
    height: 500px;
    border: 5px solid black;
    background-color: cornflowerblue;
}

.item-a {
    width: 300px;
    height: 140px;
    background-color: orange;
    border: 3px solid crimson;
}

At 100% zoom it has a gap. When I zoom, the gap disappears, but when I zoom again - the gap between container and item-a may or may not show up again (you can notice cornflower background of 1px between a parent and child borders). This is how Google Chrome handles things in both Linux and Windows 11 at the moment. Then I gave a shot to view the same code via Firefox and there is no gap regardless of zooming. difference.png

Upvotes: 1

goamn
goamn

Reputation: 2146

Contrary to the many answers suggesting to set box-sizing: border-box, I used content-box instead and it fixed my issue: box-sizing: content-box

Upvotes: 0

Kennedy Carvalho
Kennedy Carvalho

Reputation: 1

Try set child with the same width: 75vw;

.parent {
    position: relative;
    width: 75vw;
    height: 300px;
    border: 5px solid #000;
}
.child {
    width: 75vw;
    height: 100px;
    background-color: #999;
}
<center>
    <div class="parent">
        <div class="child"></div>
    </div>
</center>

Upvotes: -1

learningtoanimate
learningtoanimate

Reputation: 934

The issue lies with the border you've used and the way browsers handle this. Setting the box-sizing to border-box solves this issue. It's a common one but once you know it you'll be able to better spot it.

.parent {
  position: relative;
  width: 75vw;
  height: 300px;
  border: 5px solid #000;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.child {
  width: 100%;
  height: 100px;
  background-color: #999;
  margin: 0;
}
<!DOCTYPE html>
<div class="parent">
  <div class="child"></div>
</div>

Also, you don't need to define text/css in your tags these days, browsers know what the code is. Also try not to use it inline unless it was just for this question. Similarly, the <center> tag has been depreciated which means it's no longer supported in HTML 5 so you should center things using margin or flex. Margin is the easiest so that's why I've added that here.

Sometimes browsers will treat things differently in quirks mode too, so make sure you have a doctype declaration.

Upvotes: 3

Related Questions