CSS 및 HTML을 사용하여 여러 줄 텍스트의 가장자리에 패딩을 추가하려면 어떻게 해야 합니까?

CSS와 HTML을 사용하여 여러 줄 텍스트의 가장자리에 여백 추가

단절 공백을 사용하지 않고 이 효과를 얻으려면 태그를 사용하면 CSS와 HTML의 조합을 활용할 수 있습니다. 방법은 다음과 같습니다.

CSS:

#titleContainer {
    width: 520px;
}

h3 {
    margin:0;
    font-size: 42px;
    font-weight: bold;
    font-family: sans-serif;
}

h3 .heading {
    background-color: #000;
    color: #00a3d0;
}

h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

div {
    line-height: 1.1;
    padding: 1px 0;
    border-left: 30px solid #000;
    display: inline-block;
}

h3 {
    background-color: #000;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 0;
}

h3 .indent {
    position: relative;
    left: -15px;
}

h3 .subhead {
    padding: 0 15px;
    float: left;
    margin: 3px 0 0 -29px;
    outline: 1px solid #00a3d0;
    line-height: 1.15;
}

HTML:

<div>
<p><strong>Penjelasan:</strong></p>
<ol><li>텍스트를 <div> 전체 텍스트를 포함하려면 "titleContainer"라는 ID를 사용하세요.<li>텍스트를 <h3> 전체 <h3>에 대한 태그를 지정하고 스타일을 정의합니다. 중첩된 <span> "heading" 및 "subhead" 클래스가 있는 요소입니다.</span>
</h3>
</h3>
</li>
<li>줄 구분을 만들기 위해 또 다른 <div> <h3 id="line-height-padding-border-left-및-디스플레이로-스타일을-지정합니다-이렇게-하면-정렬을-유지하면서-줄이-분리됩니다"> line-height, padding, border-left 및 디스플레이로 스타일을 지정합니다. 이렇게 하면 정렬을 유지하면서 줄이 분리됩니다.</h3>
<li>텍스트를 <span> "indent" 클래스를 사용하고 position:relative 및 left: -15px를 사용하여 텍스트를 왼쪽으로 이동하여 줄 시작 부분에 원하는 패딩을 만듭니다.</span>
</li>
<li>"subhead" 클래스가 있는 하위 텍스트는 다음과 같습니다. 왼쪽에 떠 있고 적절한 정렬을 위해 여백을 사용하여 배치됩니다.</li>
<li>Internet Explorer(IE)에서는 조건부 주석에 포함된 부제목 텍스트의 여백을 수정하기 위해 추가 스타일이 필요합니다.</li>
<p>이 CSS 및 HTML 솔루션은 앞서 제공된 Chrome 스크린샷에서 볼 수 있듯이 각 텍스트 줄의 시작과 끝 부분에 여백을 추가하는 유연하고 브라우저 간 호환 가능한 방법을 제공합니다.</p>
</div>
</li>
</div>
</li></ol>
</div>

위 내용은 CSS 및 HTML을 사용하여 여러 줄 텍스트의 가장자리에 패딩을 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!