Дополнительный интервал вокруг h1

Question

Я хочу сделать рамку вокруг h1, и, несмотря на то, что я сбросил поля и отступы, я все еще получаю дополнительное пространство сверху и снизу, есть ли способ исправить это?

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>

Answer 1

Попробуйте добавить margin: 0 в класс hero__title:

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>

Answer 2

Вы можете добавить line-height к классу hero__word, чтобы отрегулировать высоту. Затем вы можете отрегулировать вертикальное положение, отрегулировав атрибут top в%.

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>

Answer 3

1. Если вы хотите сбросить поля и отступы, вам нужно добавить margin:0;padding:0 к универсальному селектору CSS (*)
2. Если вы хотите уменьшить дополнительное пространство на сверху и снизу внутри поля вы можете настроить значение line-height из .hero__word

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

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

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

.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>