텍스트 줄에 패딩 추가
이 글에서는 각 줄의 시작과 끝에 패딩을 추가하는 방법을 살펴보겠습니다. 지정된 컨테이너 내의 텍스트
CSS 해결책
직접적인 CSS 해결책은 없는 것 같지만 복잡한 CSS 기술을 사용하여 이 문제를 성공적으로 해결했습니다. 다음은 다양한 브라우저에서 작동하는 잘 테스트된 CSS 솔루션입니다.
#titleContainer { width: 520px; } h3 { margin: 0; font-size: 42px; font-weight: bold; font-family: sans-serif; } /* Styling for main text line */ h3 .heading { background-color: #000; color: #00a3d0; } /* Styling for subhead line */ h3 .subhead { background-color: #00a3d0; color: #000; } /* Container for line separation */ div { line-height: 1.1; padding: 1px 0; border-left: 30px solid #000; display: inline-block; } /* Positioning of main text line */ h3 { background-color: #000; color: #fff; display: inline; margin: 0; padding: 0; } /* Indentation for subhead line */ h3 .indent { position: relative; left: -15px; } /* Adjustments for subhead line */ h3 .subhead { padding: 0 15px; float: left; margin: 3px 0 0 -29px; outline: 1px solid #00a3d0; line-height: 1.15; }
HTML 구조
HTML 구조는 다음과 같아야 합니다.
<div>
위 내용은 CSS의 텍스트 줄에 패딩을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!