HTML에서 margin, padding 상하좌우 설정법

HTML에서 margin, padding 상하좌우 설정하는 여러 가지 방법

아래 그림에서 보이듯이 HTML에서 margin은 테두리(box)바깥쪽의 여백을 말하고, padding은 테두리 안쪽의 여백을 말합니다.

여기서 테두리는 border로 되어있는 부분이고 div를 써서 box를 그릴 수 있습니다.

 

 

margin, padding, border

코드 설명

margin과 padding에서 설정하는 방법은 동일합니다. 여기서는 padding으로 설명드리겠습니다.

예를 들여 margin의 경우는 아래 코드 대신에 margin-top, margin-bottom, margin-left, margin-right를 쓰면 됩니다.

아래의 코드는 모드 같은 내용입니다.

 

.pd1{
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2em;
padding-right: 2em;
}

.pd2{
padding: 1em 2em 1em 2em;
}

.pd3{
padding: 1em 2em 1em;
}

.pd4{
padding: 1em 2em;
}

 

pd1은 보이는 그대로 상하좌우의 여백을 각각 따로 지정해서 써 놓은 코드입니다.

pd2는 순서대로 [상, 우, 하, 좌]입니다. (시계방향)

pd3은 순서대로 [상, 좌우, 하]입니다.

pd4는 순서대로 [상하, 좌우]입니다.

그래서 4개의 코드는 동일한 결과를 나타냅니다.

 

 

하나로 사용할 경우

아래와 같이 하나로 사용하는 경우에는 상하좌우의 여백이 모두 동일할 경우 따로 지정할 필요가 없이 그냥 한개로 쓰면 상하좌우에 모두 적용됩니다.

 

.pd5{
padding: 1em;
}

 

 

2022.06.15 - [■ 컴퓨터/HTML | CSS] - div로 박스(box)만들기 [01]

div로 박스(box)만들기 [01]