[HTML/CSS] div와 div 사이 간격 조정하기

 

CSS로 <div>와 <div> 사이 간격 조정하기

 

 

div와 div 사이의 간격을 조정하는 방법은 여러 가지가 있습니다.

주로 CSS의 margin, gap(flexbox, grid) 속성을 사용합니다.

 

 

1. margin 사용하기

가장 일반적인 방법으로, margin을 사용하여 두 div 사이의 간격을 조정할 수 있습니다.

 

<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>

.box {
    background-color: lightblue;
    padding: 20px;
    margin-bottom: 20px;  /* 아래쪽에 20px 간격 */
}

 

  margin-bottom: 20px;  

• 아래쪽 간격을 조정합니다.
• margin-top, margin-left, margin-right 등을 사용해 각각의 방향에 간격을 줄 수 있습니다.

 

2. flexbox에서 gap 사용하기

flexbox 레이아웃을 사용할 때는 gap 속성을 사용하면 더욱 깔끔하게 간격을 조정할 수 있습니다.

 

<div class="container">
    <div class="box">첫 번째 박스</div>
    <div class="box">두 번째 박스</div>
</div>

.container {
    display: flex;
    flex-direction: column; /* 수직 방향 */
    gap: 20px; /* 20px 간격 */
}

.box {
    background-color: lightgreen;
    padding: 20px;
}

 

  display: flex;  

  gap: 20px;  

• flex와 gap을 사용하면 margin 없이도 자연스럽게 간격이 조정됩니다.

  flex-direction: column;  

• 세로 방향 정렬

 

 

3. grid에서 gap 사용하기

CSS Grid 레이아웃에서도 gap 속성을 사용하면 간격을 쉽게 조정할 수 있습니다.

 

<div class="grid-container">
    <div class="box">첫 번째 박스</div>
    <div class="box">두 번째 박스</div>
</div>

.grid-container {
    display: grid;
    gap: 20px;
}

.box {
    background-color: lightpink;
    padding: 20px;
}

 

Grid에서는 gap이 row-gap과 column-gap 모두에 적용됩니다.