아이콘이있는 인라인 링크가 왼쪽 (패딩 + 배경)에 표시되지만 글꼴이 너무 작 으면 이미지가 줄 높이에 맞지 않고 위쪽과 아래쪽에서 잘립니다. 자바 스크립트를 사용하지 않고 일어나는 것을 막을 수있는 방법이 있습니까? px로 글꼴 크기를 설정하고 싶지 않습니다.CSS의 인라인 요소에 최소 줄 높이를 설정하는 방법이 있습니까?
비 - 상대 값 (이미지 높이)으로 설정된 일부 최소 행 높이가 이상적입니다.
블록 요소 내부의 인라인 요소를 처리 할 때 경계 상자의 크기를 변경하는 옵션이 많지 않습니다. min-height은 인라인 요소에서 작동하지 않으며 line-height은 효과가 없습니다.
padding을 적절히 설정하는 것이 적절한 옵션 일 수 있지만 요소의 배경이 포함 된 블록 내부의 다른 요소와 겹치는 문제가 발생할 가능성이 높습니다. 당신은 texty 스팬의 배경이 수직으로 확장 것을 볼 수 있습니다
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
span {
background: #0F0;
padding: 0.5em 0;
}
</style>
</head>
<body>
<p>This is some demo text. Look at how <span>texty</span> it is.</p>
</body>
</html>
하지만 위의 라인을 다음에 텍스트를 겹쳐 있습니다 :
빠른 데모,이 시도. 최신 브라우저에서는이 요소의 display 속성을 inline-block으로 설정하면이 문제를 피할 수 있지만 줄 간격이 일치하지 않아 텍스트 블록 안에있는 경우 거의주의가 분산됩니다.
나는 당신이 링크에 적용하고 싶은 이미지가 표시 할 텍스트에 맞는지 확인하는 것이 가장 좋은 방법이라고 생각합니다.
인라인 태그
덕분에 그 {에 대한 많은 제한 약간이기 때문에 최소 높이를 할 수 있도록
display:inline-block를 사용할 수 있습니다 : – saji