H1 causing a gap between divs

Question

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>

h1 is adding bottom margin.. so remove margin of h1.. – kishan May 11 '15 at 10:55 — kishan, May 11 '15 at 10:55

Alex Char · Answer 1 · 2015-05-11T11:05:28.317

3

You can remove margin from h1 element:

h1 {
  margin: 0;
}

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

codepen

edited May 11 '15 at 11:05

answered May 11 '15 at 10:54

Alex Char

32,879
9
49
70

Salman A · Answer 2 · 2015-05-11T11:12:45.517

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>

score 1 · Answer 3 · answered May 11 '15 at 10:55

1

use

*{
  padding:0;
  margin:0;
}

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

answered May 11 '15 at 10:55

Roy Sonasish

4,571
20
31

3

"Unfortunately, this isn't a good practice. It's very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling". [source](https://css-tricks.com/margin-0-padding-0-no-longer-cool/) – Joel Almeida May 11 '15 at 10:59
1

You should avoid to use the universal selector (*) because it can cause some performance issues. – Mehdi Brillaud May 11 '15 at 11:00
4

@JoelAlmeida and Mehdi Brillaud : for performace issues related to the universal selector, please [read this](http://stackoverflow.com/questions/2951997/what-is-the-performance-impact-of-csss-universal-selector) **Impact is negligible** in most cases – web-tiki May 11 '15 at 11:01
@Joel Almeida using default padding and margin is not a good practice. because different browser apply different size of padding and margin. To match the design we need to remove default padding and margin from the elements http://www.mitrax.net/webdesign/css/17-css-margins-and-paddings-problem – Roy Sonasish May 11 '15 at 11:11
@RoySonasish the problem isn't the padding and margin but the universal selector. but just like web-tiki pointed out, the impact in performance is negligible, but sometimes you remove styles to buttons, submits, etc that maybe can cause you problems later. – Joel Almeida May 11 '15 at 11:18
@Joel Almeida as you check the answer I have mention that remove only default padding and margin. its also true that remove styles to buttons, submits etc that maybe can cause you problems later – Roy Sonasish May 11 '15 at 11:21
@JoelAlmeida Well, it's still a bad practice since you target all elements which have no margin and padding by default. Also, using multiple techniques with a 'negligible impact' can cause a real impact in the end. So when you can avoid it, you should. There are a lot of nice resets on the web so i can't see any reason to do that. – Mehdi Brillaud May 12 '15 at 08:19

score 1 · Accepted Answer · answered May 11 '15 at 11:04

1

Try this, add margin:0; on h1

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

answered May 11 '15 at 11:04

Vicky

358
2
15

score 0 · Answer 5 · answered Dec 18 '17 at 08:00

0

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

answered Dec 18 '17 at 08:00

Abdul Saleh

1
1

1

Please consider adding code/example and better explaining your proposed answer in respect with the question. – Yannis Dec 18 '17 at 08:03

H1 causing a gap between divs

5 Answers5