line-height로 선두와 끝도 여백이 들어가고

디자인에 확실히 맞춘 것인데, 여백 엄청 열어 버리고 있습니다.

어리 석다.

이것은 line-height에 의해 선두와 끝도 여백이 들어가 버리고 있기 때문입니다.

최초의 디자인이 이런 느낌으로 만들어져 버리고 있습니다

그럼, 50px에서 line-height로 할 수 있어 버린 선두와 마지막 여백분을 끌어 잘 하면,,,

, , , 매번 그런 일 생각하고 있으면 초몹시입니다.

가장 강한 Mixin 찾기

어쩐지 어쩔 수 없을까 하고 찾고 있으면 이런 기사를 발견했습니다.

[CSS] 텍스트 요소의 선행만 line-height를 제거하고 꼭 맞는 스타일 시트의 기술 |

선행만 line-height로 만든 상위 공간을 제거하고 위쪽에 정렬되는 스타일시트 기술

@mixin lhCrop($line-height:$base-line-height, $capital-letter: 1) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
  }
}

정확히 내가 찾고 있던 것입니다!

기사에서는 어쨌든 어려운 이야기하지만, 나는 간단하게 사용하고 싶기 때문에,

우선 이 Mxin에서 사용해 보겠습니다!

간단히 설명하면

before 요소의 margin-top에 지정된 네거티브 마진으로
line-height 로 되어 버린 선두행의 여백을 상쇄하고 있습니다!

상쇄 할 값은 calc로 계산되며

1 - #{$line-height}) * 0.5em

1. $capital-letter는 기본값은 1이며 font-size=フォントの高さ의 경우 (font-size의 75 % 높이의 글꼴 인 경우 .75)
2. $line-heigh는 인수로 설정된 텍스트의 line-height
3. 
   1.에서 2.를 가면 텍스트 1행분의, 위와 아래의 여백을 더한 수가 됩니다
4. 
   3. × 0.5em를 사용하여 위쪽 여백 수를 줄입니다
.

마이너스의 값이 되므로, 그대로 상쇄하고 있습니다!

약간 개선

이것이라면, 선행의 여백 밖에 상쇄해 주지 않기 때문에, 최종행도 여백을 after 요소로 깎아 버립니다.

게다가 overflow:hidden; 로 상쇄된 여백분을 컷**시킨다.

@mixin lhCrop($line-height:$base-line-height, $capital-letter: 1) {
  overflow:hidden; //相殺した余白をカット
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
  }
&::after{
//最終行も取り除く
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
}
}

※ overflow:hidden; 로 컷한 것으로, 어딘가에서 하기 어려워질 것 같은 생각도 하지만, 우선 컷. (그렇게 되면 생각한다)

빨리 코드에 붙여 보겠습니다.

See the Pen Mixin lhCrop by himeka223 ( 🌸 )
on CodePen.

예쁜 여백이 깨졌습니다!

아직 아직도 기사를 해독할 필요도 있지만, 일단은 이것으로 사용해 보겠습니다!

이것으로 조금이라도 코딩의 속도와 정밀도가 오르면 기쁩니다