0

I cannot figure out why there is a space between the blue and the red divs here:

Screenshot.

I’ve messed around with the padding and margins for a while now but nothing seems to work.

#header {
  background-color: green;
}

#title {
  background-color: blue;
  font-size: 80px;
  width: 100%;
  margin: 0px 0px 0px 0px;
  text-align: center;
}

#strip {
  background-color: red;
  font-size: 30px;
  width: 40%;
  margin: auto;
  text-align: center;
  display: flex;
}

.menu-button {
  margin: auto;
  text-align: center;
}
<div id="header">
  <div id="title">
    <p>Title</p>
  </div>
  <div id="strip">
    <div class="menu-button">
      <p>menu</p>
    </div>
    <div class="menu-button">
      <p>menu</p>
    </div>
    <div class="menu-button">
      <p>menu</p>
    </div>
    <div class="menu-button">
      <p>menu</p>
    </div>
  </div>
</div>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
kevinpliang
  • 3
  • 3
  • The red div is a child of the green div, so obviously it's going to look like that. – Love2Code Mar 09 '21 at 01:30
  • 1
    The `

    ` element takes the margin-bottom property from the default browser's style. If you set its margin to zero it will solve the problem.

     – Adriano Mar 09 '21 at 01:32
  • What is the expected result? Please use the [developer tools](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and inspect each element. Look at their box models. The first `

    ` has a default margin which causes the red `

    `s to be pushed down.
     – Sebastian Simon Mar 09 '21 at 01:32
  • Ah I see, thank you. I didn't know that the

    element had its own margin property I needed to worry about.

     – kevinpliang Mar 09 '21 at 01:44
  • You should use `class` instead of `id` for CSS styling. – Raptor Mar 09 '21 at 05:05

2 Answers2

0

body and p have default margin values.

body {
    margin: 0;
}

#header {
    background-color: green;
}

#title {
    background-color: blue;
    font-size: 80px;
    width: 100%;
    text-align: center;
}

#title>p {
    margin: 0;
}

#strip {
    background-color: red;
    font-size: 30px;
    width: 40%;
    margin: auto;
    text-align: center;
    display: flex;
}

.menu-button {
    margin: auto;
    text-align: center;
}

.menu-button>p {
    margin: 0;
}
<div id="header">
    <div id="title">
        <p>Title</p>
    </div>
    <div id="strip">
        <div class="menu-button">
            <p>menu</p>
        </div>
        <div class="menu-button">
            <p>menu</p>
        </div>
        <div class="menu-button">
            <p>menu</p>
        </div>
        <div class="menu-button">
            <p>menu</p>
        </div>
    </div>
</div>
JS KIM
  • 695
  • 1
  • 5
  • 12
0

You should consider resetting all margin and padding at the start of all your css to avoid unwanted margins like this.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
Sean
  • 936
  • 4
  • 15