[CSS] <li> 간격 넓히기

CSS

[CSS] <li> 간격 넓히기

싱숭셩숭 2024. 11. 23. 13:13

예제 코드

li {
  margin-bottom: 10px; /* 아래쪽 간격 추가 */
}

적용 방법

margin-bottom: 각 리스트 아이템의 아래쪽에 여백 추가
margin-top, margin-left, margin-right을 사용하여 원하는 방향에 간격을 줄 수 있다

전체 코드 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Spacing</title>
  <style>
    ul {
      list-style-type: disc; /* 디폴트 리스트 스타일 */
      padding-left: 20px;   /* 왼쪽 들여쓰기 */
    }
    li {
      margin-bottom: 15px; /* 아래쪽 간격 15px */
    }
  </style>
</head>
<body>
  <ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
  </ul>
</body>
</html>

gap 사용 (Flexbox/Grid와 함께)

리스트를 Flexbox 또는 CSS Grid로 정렬한 경우, gap 속성을 사용할 수 있다

=> 직관적이며, 리스트 간 간격을 일괄적으로 조정할 때 편리

Flexbox 예제

ul {
  display: flex;
  flex-direction: column; /* 수직 정렬 */
  gap: 20px;             /* 간격 설정 */
}

Grid 예제

ul {
  display: grid;
  row-gap: 20px; /* 행 간격 */
}