CODEWITHSUNDEEP
htmlcss
ConfusedCodeCat
ConfusedCodeCat

Reputation: 35

How To Remove Vertical White Space between divs

I am having some white space come up between my bordered divs, and I don't want it. Most of the solutions on here delt with divs that had other aspects like width and height, but mine are pure text.

.h1z1 {
  text-align: center;
}
.g1 h2, .g2 h2, .g3 h2 {
  padding: 10px;
  background-color: #ccffcc; 
}
.g1, .g2, .g3 {
  border-left: 6px solid #00ff00;
}
<body style="font-family: 'Source Code Pro', monospace;">
  <div class="header"></div>
  <div class="gtitle">
    <h1 class="h1z1">Graphics Cards</h1>
    <hr />
  </div>
  <div class="g1">
    <h2>Titan XP</h2>
  </div>
  <div class="g2">
    <h2>Titan X (Pascal)</h2>
  </div>
  <div class="g3">
    <h2>GeForce GTX 1080ti</h2>
  </div>
</body>

Upvotes: 1

Views: 3229

Answers (1)

ankita patel
ankita patel

Reputation: 4251

Give margin:0; to .g1 h2, .g2 h2, .g3 h2. because h2 have default margin. 

.h1z1{
  text-align: center;
}

.g1 h2, .g2 h2, .g3 h2{
  padding: 10px;
  background-color: #ccffcc;
  margin:0;
}

.g1, .g2, .g3{
  border-left: 6px solid #00ff00;
}
<body style="font-family: 'Source Code Pro', monospace;">
  <div class="header"></div>
  <div class="gtitle">
    <h1 class="h1z1">Graphics Cards</h1>
    <hr />
  </div>
  <div class="g1">
    <h2>Titan XP</h2>
  </div>
  <div class="g2">
    <h2>Titan X (Pascal)</h2>
  </div>
  <div class="g3">
    <h2>GeForce GTX 1080ti</h2>
  </div>
</body>

Upvotes: 3

Related Questions