CODEWITHSUNDEEP
htmlcss
Felipe the Sheepy
Felipe the Sheepy

Reputation: 45

Large gaps when increasing font size

Whenever I increase the font size I get these large gaps between the <p> element and the next element. Can anyone tell me why?

enter image description here

.text_box {
  height: 60px;
  width: 252px;
  background-color: grey;
  text-align: center;
  font-size: 55px;
  border-radius: 6px;
}
<p class="text_box"> text </p>
<p> text </p>

Upvotes: 3

Views: 1047

Answers (3)

Eugene Tsakh
Eugene Tsakh

Reputation: 2879

It's because p tag has margin: 1em 0; by default and 1em is equal to font-size of an element (55px in your case). To avoid this try overriding the margin with some static value (10px 0 for example)

Upvotes: 2

user4563161
user4563161

Reputation:

Browsers will auto inject css for certain elements.

Usually we use a CSS reset plus standard predefined styles for standard elements to suit our needs.

This should be the first thing you should do at the start of any project.

Also the issue with EM is that EM is a relative value that is based on the relative font size. So when you increase the font size you end up relatively increasing your margins because your margins are set to EM

EM will calculate 1em to font value. so if your font is 12pt, 1em unit will equate to 12pt so 6em would = 72pts and thus your margin would increase by 72pts.

In this case it was the margin causing the issue.

.text_box {
  height: 60px;
  width: 252px;
  background-color: grey;
  text-align: center;
  font-size: 55px;
  border-radius: 6px;
}

p {
  margin: 0;
}
<p class="text_box"> text </p>
<p> text </p>

Upvotes: 1

Pim H
Pim H

Reputation: 223

p has margin-block-start and margin-block-end 1em; so you have to override it to 0em (like I inspector edit in blue line) the space will disappear.

enter image description here

Upvotes: 0

Related Questions