h1 주변의 추가 간격

debugcn 에 게시 Dev

Konya

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>

달콤한

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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

h1 주변의 추가 간격

h1 주변의 추가 간격

h1 제목 상단의 간격

.entry-content 내에 h1 기원의 h2 추가

textview의 추가 줄 간격

Linux의 파일 이름에서 <h1> 태그 추가

sprintf에서 변수 간 간격 추가

목록 iOS 14 SwiftUI의 추가 간격

HSQLDB의 날짜에 간격 추가

h1 id를 참조하여 h1 내부의 스팬 값 가져 오기

O (max (h1, h2)) 시간에 두 개의 BST를 병합

div 사이에 간격을 일으키는 H1

div 사이에 간격을 일으키는 H1

임의의 시간 간격으로 난수 추가

C #의 ComboBox에서 간격으로 시간 추가

헤더 h1, h2, h3 추가 (Contempo)

두 텍스트 요소 <p>와 <h1> 사이의 수직 공간 제거

주말 시간을 제외한 Postgres의 타임 스탬프에 간격 시간을 추가하는 방법

탭할 때 간격을 추가하는 ZSH PS1

탭할 때 간격을 추가하는 ZSH PS1

내 CSS 기반 탐색의 추가 간격

datetime 객체에 간격을 추가하기위한 Python의 시간 함수

MATLAB 특정 요소 주변의 행렬 요소에 1 추가

가변 격자 간격은 격자 부모의 패딩이 격자 요소를 침범하게 만듭니다.

가변 간격에 대한 액세스

Conky에서 텍스트 주위에 간격을 추가 하시겠습니까?

Conky에서 텍스트 주위에 간격을 추가 하시겠습니까?

<h1> 태그의 패딩 전환

h1의 텍스트 앞 여백

요일 및 시간 + 공휴일을 기준으로 정확한 가격 범주에 근무 시간 추가

div 내부 이미지 주변의 추가 공간을 제거하는 방법