How to push two
blocks closer to each other in HTML?

Question

I made the following code but the two DIV blocks have a blank space between them.

<!DOCTYPE html>
<html>
    <body>
        <div style="background:blue; width: 200px; height: 200px">
        <p>123</p>
        </div>

        <div style="background: yellow; width: 200px; height: 200px">
        <p>456</p>
    </div>
    </body>
</html>

I would like to have a code where there is no space between the two blocks. How do I do that?

Browsers have default stylings for everything. You should add a [CSS reset](https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do) — Peter Krebs, Aug 06 '21 at 12:38

score 4 · Accepted Answer · edited Aug 06 '21 at 13:28

4

<html>
    <body style="display:flex; flex-direction: column">
        <div style="background:blue; width: 200px; height: 200px">
        <p>123</p>
        </div>

        <div style="background: yellow; width: 200px; height: 200px">
        <p>456</p>
    </div>
    </body>
</html>

edited Aug 06 '21 at 13:28

Community

1
1

answered Aug 06 '21 at 12:38

Shafqat Jamil Khan

1,039
1
9
17

score 2 · Answer 2 · answered Aug 06 '21 at 12:34

You can normalize the CSS and define margin: 0:

* {
  margin: 0;
}

<!DOCTYPE html>
<html>
    <body>
        <div style="background:blue; width: 200px; height: 200px">
        <p>123</p>
        </div>

        <div style="background: yellow; width: 200px; height: 200px">
        <p>456</p>
    </div>
    </body>
</html>

score 2 · Answer 3 · edited Aug 06 '21 at 13:10

The gap issue is coming because of the default margin applied for the p tag. The * selector will target all elements. So it is better you can add class for p tag and apply your styles.

p.no-margin {
  margin: 0px;
}

<div style="background:blue; width: 200px; height: 200px">
  <p class="no-margin">123</p>
</div>

<div style="background: yellow; width: 200px; height: 200px">
  <p class="no-margin">456</p>
</div>

How to push two blocks closer to each other in HTML?

3 Answers3

How to push two
blocks closer to each other in HTML?