CODEWITHSUNDEEP
htmlcss
Sergio Estrada
Sergio Estrada

Reputation: 236

H1 extra padding not being removed

Hello I'm trying to get rid of the extra padding on my h1 text (space above and below the text), I've tried it all and nothing seems to be working. Any idea why? Here's a simple example, as you can see there's extra space above and below each h1 text.

* {
  padding: 0;
  margin: 0;
}

.some-text {
  display: inline-block;
  border: solid 3px blue;
}

.some-text h1 {
  text-transform: capitalize;
  font-size: 60px;
  color: red;
  padding: 0;
  margin: 0;
}

h1 {
  padding: 0;
  margin: 0;
}
<div class="some-text">
  <h1>hello there</h1>
  <h1>cruel world</h1>
</div>

Upvotes: 2

Views: 748

Answers (2)

kiranvj
kiranvj

Reputation: 34147

Its not padding or margin, its the default spacing for that font. You can adjust it with line-height if needed

* {
  padding: 0;
  margin: 0;
}

.some-text {
  display: inline-block;
  border: solid 3px blue;
}

.some-text h1 {
  text-transform: capitalize;
  font-size: 60px;
  color: red;
  padding: 0;
  margin: 0;
  line-height: 40px;
}

h1 {
  padding: 0;
  margin: 0;
}
<div class="some-text">
  <h1>hello there</h1>
  <h1>cruel world</h1>
</div>

Line height can also be unit less, so that the new line-height will be

line-height = calculated font-size multiplied by the provided unit less line height.

Example

line-height: .7;
font-size: 60px

In this case the line-height will be 60px * .7 = 42px;

Upvotes: 1

Ahs N
Ahs N

Reputation: 8386

This is how I resolved it:

* {
  padding: 0;
  margin: 0;
}

.some-text {
  display: inline-block;
  border: solid 3px blue;
}

.some-text h1 {
  text-transform: capitalize;
  font-size: 60px;
  color: red;
  line-height: 40px;
}
<div class="some-text">
  <h1>hello there</h1>
  <h1>cruel world</h1>
</div>

The issue is the default line-height of the element.

Upvotes: 3

Related Questions