Removing space between heading and div

Question

this part has been bothering me for half an hour, and I dont know how to solve. So, how do I remove the lightgrey space between heading and div? Should I be using margin and padding to do it?

Below is my code:

<!-- Description -->
<h3 style="background-color:white; font-size:20px;">
Within three years, production area had more than tripled to meet growing demands. The year 
1999 marked the completion of our current plant of 65,000 
square feet, fully equipped with state-of-the-art technology, as well as the start of our 
Surface Mount Technology process. Implementation of new 
lead-free production lines began in early 2003. Our success is the result of the joint-efforts 
of our innovative and quality-focused engineering team, 
whose expertise range from design to debugging, and the dedication of the rest of our staff.

</h3>
<!-- ------------------------------ -->

<div style="width: 100%; display: table;margin:0px; padding:0px; background-color:#D6EAF8 ">
<div style="display: table-row">
<!-- ------------------------------------------------------------------ -->
<!-- Why Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-left:620px">Why Us?</h3>
<ul style="padding-left:640px">
<li><a href="http://www.scope.com.my/2014/SMSB2014/qpolicy.htm" style="background- 
color:#D6EAF8 ; color:black">Policy</a></li>
<li><a href="http://www.scope.com.my/2014/SMSB2014/manufacturing_capability.htm" 
style="background-color:#D6EAF8 ; color:black">Capability</a></li>
<li><a href="https://www.scope.com.my/career.html" style="background-color:#D6EAF8 ; 
color:black">Careers</a></li>
</ul>

</div> 

<!-- Follow Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-right:500px">Follow Us</h3>
<ul style="padding-left:20px">
<li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886" 
style="background-color:#D6EAF8 ; color:black">
    <img src="icon1.jpg" alt=""> Facebook</a></li>
<li><img src="icon2.jpg" alt=""> Twitter</li>
<li><img src="icon3.jpg" alt=""> Linkedin</li>
</ul>

</div> 
<!-- ------------------------------------------------------------------- -->
</div>
</div>

Right-click and inspect element to see which element is providing extra padding/margin. It will help next time. — Mr. Polywhirl, Jan 13 '20 at 03:58

score 3 · Answer 1 · answered Jan 13 '20 at 03:56

3

It's margin-bottom of h3, make it as h3 {margin-bottom: 0}

answered Jan 13 '20 at 03:56

Sameer

4,758
3
20
41

score 2 · Accepted Answer · answered Jan 13 '20 at 03:57

2

you should remove margin bottom: h3

<h3 style="background-color:white; font-size:20px;margin-bottom:0;">

answered Jan 13 '20 at 03:57

Ranjith v

1,032
5
15

score 1 · Answer 3 · answered Jan 13 '20 at 04:05

All you really need is to apply margin-bottom:0; to the first h3:

<h3 style="background-color:white; font-size:20px; margin-bottom:0;">

Although, I'd like to offer you a solution without so much inline-CSS as well. Read more on What's so bad about in-line CSS?.

I've effectively moved duplicate styling into classes and included some id's to define your styling. All styling is included in pure CSS and could be included as an external style sheet.

See the JSFiddle

.h3_Summary {
  background-color: white;
  font-size: 20px;
  margin-bottom: 0;
}

.div_outer {
  width: 100%;
  display: table;
  margin: 0px;
  padding: 0px;
  background-color: #D6EAF8;
}

.div_inner {
  display: table-row;
}

.div_container {
  margin: 0px;
  padding: 0px;
  display: table-cell;
}

#h3_whyUs {
  padding-left: 620px;
}

.ul_first {
  padding-left: 640px;
}

ul li a {
  background-color: #D6EAF8;
  color: black;
}

#h3_followUs {
  padding-right: 500px;
}

.ul_second {
  padding-left: 20px;
}

<!-- Description -->
<h3 class="h3_Summary">
  Within three years, production area had more than tripled to meet growing demands. The year
  1999 marked the completion of our current plant of 65,000
  square feet, fully equipped with state-of-the-art technology, as well as the start of our
  Surface Mount Technology process. Implementation of new
  lead-free production lines began in early 2003. Our success is the result of the joint-efforts
  of our innovative and quality-focused engineering team,
  whose expertise range from design to debugging, and the dedication of the rest of our staff.

</h3>
<!-- ------------------------------ -->

<div class="div_outer">
  <div class="div_inner">
    <!-- ------------------------------------------------------------------ -->
    <!-- Why Us -->
    <div class="div_container">
      <h3 id="h3_whyUs">Why Us?</h3>
      <ul class="ul_first">
        <li><a href="http://www.scope.com.my/2014/SMSB2014/qpolicy.htm">Policy</a></li>
        <li><a href="http://www.scope.com.my/2014/SMSB2014/manufacturing_capability.htm">Capability</a></li>
        <li><a href="https://www.scope.com.my/career.html">Careers</a></li>
      </ul>

    </div>

    <!-- Follow Us -->
    <div class="div_container">
      <h3 id="h3_followUs">Follow Us</h3>
      <ul class="ul_second">
        <li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886">
            <img src="icon1.jpg" alt=""> Facebook</a></li>
        <li><img src="icon2.jpg" alt=""> Twitter</li>
        <li><img src="icon3.jpg" alt=""> Linkedin</li>
      </ul>

    </div>
    <!-- ------------------------------------------------------------------- -->
  </div>
</div>

Let me know if you want any clarification! Goodluck with it! :)

score 1 · Answer 4 · answered Jan 13 '20 at 04:59

1

Add following css lines to your style sheet.

h3 { margin-bottom: 0; }

answered Jan 13 '20 at 04:59

lakshitha madushan

669
4
7

Removing space between heading and div

4 Answers4

h3 { margin-bottom: 0; }