CODEWITHSUNDEEP
htmlcss
Konya
Konya

Reputation: 97

Extra spacing around h1

I want to make a box around h1, and despite that i reset the margin and padding I'm still getting extra space on top and bottom, is there is a way to fix it ?

Image of the problem

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.hero__title {
  font-size: 15.5vw;
  font-weight: normal;
}

.hero__word {
  display: inline-block;
  position: relative;
}

.hero__block {
  height: 90%;
}

.hero__block:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  border: 1px solid black;
}
<h1 class="hero__title">
  <div class="hero__word">
    We
    <span class="hero__block"></span>
  </div>
  <div class="hero__word">
    Shape
    <span class="hero__block"></span>
  </div>
</h1>

Upvotes: 0

Views: 193

Answers (2)

Yann Armelin
Yann Armelin

Reputation: 711

Try to add margin: 0 to the hero__title class:

body{
 margin: 0;
 padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

.hero__title {
    font-size: 15.5vw;
    font-weight: normal;
    /* 
     * inserted margin here
     */
    margin: 0;
}
.hero__word {
    display: inline-block;
    position: relative;
}
.hero__block {
    height: 90%;
}
.hero__block:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    border: 1px solid black;
}
<h1 class="hero__title">
  <div class="hero__word">
    We
     <span class="hero__block"></span>
  </div>
    <div class="hero__word">
      Shape
    <span class="hero__block"></span>
  </div>
</h1>

Upvotes: 2

yinsweet
yinsweet

Reputation: 2851

You can add line-height to class hero__word to adjust the height. Then, you may adjust the vertical position by adjusting the top attribute in %.

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.hero__title {
  font-size: 15.5vw;
  font-weight: normal;
}

.hero__word {
  display: inline-block;
  position: relative;
  line-height: 95%;
}

.hero__block {
  height: 90%;
}

.hero__block:before {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  height: 100%;
  border: 1px solid black;
}
<h1 class="hero__title">
  <div class="hero__word">
    We
    <span class="hero__block"></span>
  </div>
  <div class="hero__word">
    Shape
    <span class="hero__block"></span>
  </div>
</h1>

Upvotes: 1

Related Questions