CODEWITHSUNDEEP
htmlcss
Techagesite
Techagesite

Reputation: 475

H1 causing a gap between divs

There is a gap between .heads and .container1 that has something to do with the h1 tag. Tried without h1 and it works, however i need the h1 there though.

How would i go about removing the gap between .heads and .container1?

http://codepen.io/techagesite/pen/Nqxzvg

.heads {
  background-color: #FF9000;
  padding: 0px 0px 0px 0px;
  border: 1px solid #FFC223;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: none;
  border-bottom-right-radius: none;
  border-bottom-left-radius: none;
}
h1 {
  padding: 0;
  font-size: 20px;
  font-family: Tekton Pro;
  color: #71A00E;
}
.container1 {
  width: 100%;
  border: 1px solid #006699;
  background: #0A3D5D;
  float: left;
  padding-bottom: 4px;
  padding-top: 4px;
  padding-right: 0px;
  padding-left: 4px;
  clear: both;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: none;
  border-top-left-radius: none;
}
p.normal {
  font-size: 21px;
  font-family: tahoma;
  color: #F7DF57;
}

<div class="heads">
  <h1>Some heading in here</h1>
</div>
<div class="container1">
  <p class="normal">Some text in here</p>
</div>

Upvotes: 0

Views: 1585

Answers (5)

Abdul Saleh
Abdul Saleh

Reputation: 1

I just add a display property of inline-block to the h1 or p element and it removes all the div gaps.

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272096

The gap is caused by margin collaspsing. In summary, the bottom margin of h1 is collapsed with that of the head element. Note that The top margin is not collapsed because there is a border between the margin of head element and the margin of h1.

You can use various techniques to contain the margin. The simplest one is to use overflow: hidden (in this example you can add a bottom border whose color matches background color).

.heads {
  background-color: #FF9000;
  border: 1px solid #FFC223;
  border-bottom: none;
  /* irrelevant rules removed */
  overflow: hidden;
}
h1 {
  font-size: 20px;
  color: #71A00E;
}
.container1 {
  width: 100%;
  border: 1px solid #006699;
  background: #0A3D5D;
  float: left;
  clear: both;
  /* irrelevant rules removed */
}
p.normal {
  font-size: 21px;
  color: #F7DF57;
}
<div class="heads">
  <h1>Some heading in here</h1>
</div>
<div class="container1">
  <p class="normal">Some text in here</p>
</div>

Upvotes: 3

Alex Char
Alex Char

Reputation: 33218

You can remove margin from h1 element:

h1 {
  margin: 0;
}

Strongly suggest to read about h1 element here and Collapsing margins too.

codepen

Upvotes: 3

Vicky
Vicky

Reputation: 378

Try this, add margin:0; on h1

  h1 {
            padding: 0;
            font-size:20px;
        font-family:Tekton Pro;
        color:#71A00E;
          margin:0;
        }

Upvotes: 1

Roy Sonasish
Roy Sonasish

Reputation: 4599

use

*{
  padding:0;
  margin:0;
}

it will remove all extra padding and margin of all block element.

Upvotes: 1

Related Questions