줄 사이에 다른 간격을 포함하십시오.

Question

저는 CSS를 처음 사용하고 제목, 날짜 및 설명이있는 페이지를 만들려고합니다. 나는 다른 섹션 사이에 다른 양의 패딩을 포함시키는 가장 좋은 방법을 찾아 낼 수 없다. 날짜가 제목 바로 아래에오고 날짜와 설명 사이에 약간의 공백이 있어야하지만, 지금은 제목과 날짜 사이에 더 많은 공간이 있고 날짜와 설명 사이에는 공간이 적습니다. nunjucks를 템플릿으로 사용하고 있습니다. 어떤 도움을 주시면 감사하겠습니다! Mainpage.nunjucks에서

:

<div class="title"> 
    {{ options.title }} 
</div> 

<div class="date"> 
    Created {{ options.date }} 
</div> 

<div class="subtitle"> 
    {{ options.description }} 
</div> 

common.scss에서는 :

.Mainpage { 
    padding: 20px 0; 

    div { 
     padding: 5px 0; 
    } 

    .subtitle { 
     font-size: 12px; 
     font-weight: normal; 
    } 

    .date { 
     color: #aaa; 
     font-size: 11px; 
    } 
} 

Answer 1

당신은 단순히 당신이 패드에 원하는 div의 padding-bottom 속성을 지정할 수 있습니다. 40px 당신이 원하는 패딩에

.date { 
    color: #aaa; 
    font-size: 11px; 
    padding-bottom: 40px; 
} 

변경 : 패드 날짜의 바닥에 예를 들어, CSS의 .date 부분을 변경합니다. div에 대해이 방법으로 패딩을 지정할 수 있습니다.