CSS의 텍스트 줄에 패딩을 추가하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-06 19:09:03
원래의
119명이 탐색했습니다.

How to Add Padding to Lines of Text in CSS?

텍스트 줄에 패딩 추가

이 글에서는 각 줄의 시작과 끝에 패딩을 추가하는 방법을 살펴보겠습니다. 지정된 컨테이너 내의 텍스트

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!