[html] 목록 항목 사이의 세로 간격을 어떻게 설정합니까?

Html / 글쓴이

<ul>요소 내에서 행 사이의 수직 간격은 분명히 line-height 속성으로 형식을 지정할 수 있습니다.

내 질문은 <ul>요소 내 에서 목록 항목 사이의 세로 간격을 어떻게 설정합니까?

답변

여백을 사용할 수 있습니다. 예를 참조하십시오.

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

답변

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

편집 : 마지막 li 요소에 대해 특별한 경우를 사용하지 않으면 나중에 목록에 작은 간격이 생깁니다. http://jsfiddle.net/wQYw7/

이제 내 솔루션과 비교하십시오 : http://jsfiddle.net/wQYw7/1/

확실히 이것은 이전 브라우저에서 작동하지 않지만 이전 브라우저에서 이것을 활성화하는 js 확장을 쉽게 사용할 수 있습니다.

답변

나는 IE8 지원의 미덕을 가진 이것에 기울일 것입니다.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

답변

태그에 margin를 추가 하십시오 li. 그러면 사이에 공백 이 생기고 태그 내의 텍스트 간격을 설정하는 데 li사용할 수 있습니다 .line-heightli

답변

HTML 이메일 블래스트를 생성 할 때 스타일 시트 나 스타일 / 스타일 블록을 사용할 수없는 경우가 많습니다. 모든 CSS는 인라인이어야합니다. 글 머리 기호 사이의 간격을 조정하려면 li style = “margin-bottom : 8px;”를 사용합니다. 각 글 머리 기호 항목에서. 원하는대로 픽셀 값을 사용자 지정합니다.

답변

전체 목록에 적용하려면

ul.space_list li { margin-bottom: 1em; }

그런 다음 html에서 :

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

답변

의사 클래스를 사용하여 각 목록에 대해 padding-bottom을 설정하는 것은 실행 가능한 방법입니다. 또한 줄 높이를 사용할 수 있습니다. font-family, Font-weight 등과 같은 글꼴 속성은 높이가 고르지 않은 경우 역할을합니다.