목록 항목 사이에 세로 공간을 설정하려면 어떻게 해야 합니까?

목록 항목 사이에 세로 공간을 설정하려면 어떻게 해야 합니까?

A안에<ul>요소, 분명히 선 사이의 수직 간격을 선 높이 속성으로 포맷할 수 있습니다.

제 질문은, A 안에<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;
}

편집: 마지막 원소에 특수한 경우를 사용하지 않으면 목록에 작은 간격이 표시됩니다. http://jsfiddle.net/wQYw7/

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

물론 이것은 오래된 브라우저에서는 작동하지 않지만 오래된 브라우저에서는 이것을 가능하게 하는 js 확장을 쉽게 사용할 수 있습니다.

오래된 질문이지만 답이 부족했다고 생각합니다.저는 인접한 형제 선택기를 사용할 것입니다.이런 식으로 CSS의 "한" 줄만 쓰고 대부분의 답이 부족한 끝이나 시작 부분의 공간을 고려합니다.

li + li {
  margin-top: 10px;
}

저는 IE8 지원의 장점을 가진 이것에 관심이 있습니다.

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

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

JSFiddle

추가.margin당신에게li태그들. 그것은 그 사이에 공간을 만들 것입니다.li사용할 수 있습니다.line-height간격을 텍스트에 맞추다li꼬리표를 붙이기

또한 UL의 선 높이 속성을 사용할 수 있습니다.

ul {
  line-height: 45px;
}

div {
  border: 2px solid black;
}

<div>
  <ul>
    <li>line one</li>
    <li>line two</li>
    <li>line three</li>
  </ul>
</div>

전체 목록에 적용하려면 다음을 사용합니다.

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

그런 다음 html에서:

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

상위에서 CSS 그리드 사용ul다음과 같은 요소:

ul {
  display: grid;
  gap: 10px;
}

HTML 전자 메일을 작성할 때 스타일 시트나 스타일/스타일 블록을 사용할 수 없는 경우가 많습니다.모든 CSS는 인라인이어야 합니다.탄환 간격 조절을 원하시는 경우 각 탄환 항목에 li style="margin-bottom:8 px;"을 사용합니다.픽셀 값을 원하는 대로 사용자 지정합니다.

저는 개별 리스트 항목이 아닌 전체적으로 순서 없는 리스트에 마진 바텀을 추가함으로써 리스트 항목 뒤에 공백을 만드는 것이 훨씬 쉽다는 것을 발견했습니다.

<ol style="line-height: 1.5em; margin-bottom: 15px">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

<ul style="line-height: 1.5em; margin-bottom: 15px">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

의사 클래스를 사용하여 각 목록에 패딩-바텀을 설정하는 것이 실행 가능한 방법입니다.또한 선 높이를 사용할 수 있습니다.글꼴 패밀리, 글꼴 무게 등의 글꼴 속성은 고르지 않은 높이에서 역할을 합니다.

<br>사이에<li></li>제가 시도한 모든 웹 브라우저에서 라인 엔트리가 완벽하게 작동하는 것처럼 보이지만 온라인 W3C CSS3 체커를 통과하지 못합니다.제가 추구하는 줄 간격을 정확하게 알려줍니다.제가 생각하는 한, 그것은 의심할 여지 없이 효과가 있기 때문에 누군가가 좋은 법적 대안을 제시할 때까지 W3C가 무엇을 말하든 간에 저는 그것을 계속 사용하고 있습니다.

언급URL : https://stackoverflow.com/questions/19254411/how-do-i-set-vertical-space-between-list-items