CODEWITHSUNDEEP
htmlcss
Joe Jameson
Joe Jameson

Reputation: 89

Why is there a space between div tags when I put a h1 tag in a div tag?

This html code adds a space like in this image:

Image of html page

But, I don't want those spaces in between the divs,

And, when I remove the h1 tag, it removes the spaces

Can someone help me out here? Any help would be appreciated!

.div {
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
}
<div class="div" style="height: 200px; width: 55%">
  <p style="font-size: 25px;">RHT</p>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>

Upvotes: 1

Views: 66

Answers (4)

wazz
wazz

Reputation: 5068

This approach uses display: table-cell; and float: left;. The h-tag isn't touched. Space between divs is removed.

.div {
  border: 1px solid #91b8f7;
  display: table-cell;
  border-color: #91b8f7;
  float: left;
  word-wrap: break-word;
}
<div class="div" style="height: 200px; width: 55%">
  <p style="font-size: 25px;">RHT</p>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

Your inline elements (the divs set to display: inline-table) are trying to lineup according to the text baseline. The gaps are created because not all the text is the same font size. Notice how the text lines up in this screen cap:

screen grab

Changing the vertical-align property to something like top will change how these inline elements are aligned. That will remove the gaps, but I'm not sure why inline-table is being used.

.div {
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
  vertical-align: top;
}
<div class="div" style="height: 200px; width: 55%">
  <p style="font-size: 25px;">RHT</p>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>

Upvotes: 1

enbermudas
enbermudas

Reputation: 1615

That gap is generated by the p tag that contains these letters: RHT because of it's font-size and margin. You can "fix" the problem by removing the font-size from that div or by giving a 0 margin to every single p tag in your code. Either way, i would rather use css grid-layout or flex-box to generate the code structure you want.

Upvotes: 0

Reza Saadati
Reza Saadati

Reputation: 5419

That's because of the display attribute. One solution would be to use h1 { display: inline }.

.div {
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
}
h1 {
  display: inline;
}
<div class="div" style="height: 200px; width: 55%">
  <h1>hello</h1>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>

Upvotes: 0

Related Questions