[css] Padding, Margin

요소는 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. Padding은 내용과 테두리 사이의 여유공간이고, Margin은 요소 주위의 여백. 즉, 테두리 밖의 공간이다.

 

 

Padding

패딩을 주는 방법에는 여러가지가 있다.

 

1. 

/* css */
p {
  border: 1px solid blue;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 120px;
  padding-right: 60px;
}

<!-- html -->
<p>Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>

 

2. 한줄에 쓰는 방법

p {
  padding: 위 오른쪽 아래 왼쪽;
}

/* css */
p {
  border: 1px solid blue;
  padding: 20px 60px 40px 120px;
}

<!-- html -->
<p>Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>

 

3. 위, 아래, 왼쪽, 오른쪽이 다 같은 경우

/* css */
p {
  border: 1px solid blue;
  padding: 50px;
}

<!-- html -->
<p>Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>

 

4. 위, 아래가 같고 왼쪽, 오른쪽이 같은 경우

/* css */
p {
  border: 1px solid blue;
  padding: 50px 100px;
}

<!-- html -->
<p>Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>

 

Margin

Margin을 주는 방법도 Padding을 주는 방법과 같다.