A white gap between two div elements

Question

Here is the HTML code (the white gap started appearing as soon as I added h3 to the last div):

body {
  margin: 0;
  font-family: sans-serif;
  font-weight: 400;
  background-image: url("../images/rooms.jpg");
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #343434;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  padding: 0;
  display: inline-block;
  margin-left: 60px;
  padding-top: 19px;
  position: relative;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 13px;
  text-transform: uppercase;
  padding: 1em 0.5em;
}

nav a:hover {
  color: yellow;
}

.welcome {
  width: 100%;
  height: 250px;
  background: #406295;
}

.welcome h3 {
  text-align: center;
}

<header>
  <div class="container">

    <a href="#" class="logo"><img src="images/logo.png" alt=""></a>
    <nav>
      <ul>
        <li><a href="#">Room Types</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="welcome">
  <h3>Welcome to</h3>
</div>

I am fairly new to web development and stackoverflow. So I am sorry for any inconveniences. Any help is appreciated. Thank you.

did you check is there any padding or margin , can you add a snippet or fiddle ? — Jishnu V S, Sep 18 '17 at 11:04

score 0 · Answer 1 · answered Sep 18 '17 at 11:05

Set margin: 0px; on h3 tag to resolve this issue. Check updated Snippet below..

body{
  margin:0;
  font-family: sans-serif;
  font-weight: 400;
  background-image: url("../images/rooms.jpg");
}

.container{
  width: 80%;
  margin : 0 auto;
}
header{
  background: #343434;
}
header::after{
  content: '';
  display: table;
  clear:both;
}

.logo{
  float: left;
  padding:10px;
}
nav{
  float:right;
}
nav ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav li{
  padding: 0;
  display: inline-block;
  margin-left: 60px;
  padding-top: 19px;
  position: relative;
}
nav a{
  text-decoration: none;
  color:white;
  font-size: 13px;
  text-transform: uppercase;
  padding: 1em 0.5em;

}
nav a:hover{
  color:yellow;
}

.welcome{
  width: 100%;
  height: 250px;
  background: #406295;
}

.welcome h3{
  text-align: center;
  margin: 0px;
}

 <header>
    <div class="container">

      <a href="#" class = "logo"><img src="images/logo.png" alt=""></a>
      <nav>
        <ul>
          <li><a href="#">Room Types</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="welcome">
    <h3>Welcome to</h3>
  </div>

@ArnoldHeinminthant If my answer solved your problem then please accept it.. — Super User, Sep 18 '17 at 11:21

score 0 · Answer 2 · edited Sep 18 '17 at 11:16

0

You can try adding style="display: inline; margin:0px; padding:0px;" to your <h3> Tag.

edited Sep 18 '17 at 11:16

Ichigo Kurosaki

3,765
8
41
56

answered Sep 18 '17 at 11:06

J-H

1,795
6
22
41

score 0 · Answer 3 · answered Sep 18 '17 at 11:06

Just remove the margin from h3 like

.welcome h3 {
  text-align: center;
  margin:0;
}

body {
  margin: 0;
  font-family: sans-serif;
  font-weight: 400;
  background-image: url("../images/rooms.jpg");
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #343434;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  padding: 0;
  display: inline-block;
  margin-left: 60px;
  padding-top: 19px;
  position: relative;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 13px;
  text-transform: uppercase;
  padding: 1em 0.5em;
}

nav a:hover {
  color: yellow;
}

.welcome {
  width: 100%;
  height: 250px;
  background: #406295;
}

.welcome h3 {
  text-align: center;
  margin:0;
}

<header>
  <div class="container">

    <a href="#" class="logo"><img src="images/logo.png" alt=""></a>
    <nav>
      <ul>
        <li><a href="#">Room Types</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="welcome">
  <h3>Welcome to</h3>
</div>

score 0 · Answer 4 · answered Sep 18 '17 at 11:07

This is due to collapsing margins

Remove the margin on the h3. Replace it with padding if you want to create space between the header and maintain the background colour.

body {
  margin: 0;
  font-family: sans-serif;
  font-weight: 400;
  background-image: url("../images/rooms.jpg");
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #343434;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  padding: 0;
  display: inline-block;
  margin-left: 60px;
  padding-top: 19px;
  position: relative;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 13px;
  text-transform: uppercase;
  padding: 1em 0.5em;
}

nav a:hover {
  color: yellow;
}

.welcome {
  width: 100%;
  height: 250px;
  background: #406295;
}

.welcome h3 {
  text-align: center;
  margin-top: 0;
}

<header>
  <div class="container">

    <a href="#" class="logo"><img src="images/logo.png" alt=""></a>
    <nav>
      <ul>
        <li><a href="#">Room Types</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="welcome">
  <h3>Welcome to</h3>
</div>

score 0 · Answer 5 · edited Sep 18 '17 at 11:39

0

Either apply margin-top:0 for H3-Tag or apply a float:left for .welcome

Both will fix your issue

edited Sep 18 '17 at 11:39

J-H

1,795
6
22
41

answered Sep 18 '17 at 11:13

Pons Purushothaman

2,225
1
14
23

klumme · Answer 6 · 2017-09-18T11:36:43.060

Another way is to apply a rule of overflow: auto to the .welcome div... thus creating a new block formatting context and avoiding the collapsing margins.

Edit: Let's add a little more context. In the spec, you can read that adjoining margins will collapse under certain circumstances. In particular, the margins need to belong to block-level boxes participating in the same block formatting context.

Even though .welcome and h3 are block-level boxes in your example, neither automatically establishes a new block formatting context (meaning they participate in the same block formatting context, meaning their margins collapse). Looking at the spec again, we see that some of the ways to establish a new block formatting context is to have a float, an absolutely positioned element, or a block box with the property of overflow set to something else than visible.

That's why the suggestions regarding overflow: auto or floating one of the elements work. My understanding is that if we make .welcome establish a new block formatting context, the context it participates in is different from the one it establishes itself. Removing the margin (possibly replacing it with padding) is another way to get around the problem.

A white gap between two div elements

6 Answers6