HTML/CSS margin,padding 간단정리

 

margin :

마진의 너비를 지정하는 속성으로 border의 바깥쪽 여백을 정함

플러스 값, 마이너스 값을 입력할 수 있음 

px이나 % 단위를 입력

 

 

padding :

패딩의 너비를 지정하는 속성으로 border의 안쪽 여백을 정함

px이나 % 단위를 입력

 

 

border :

글자 밖의 테두리를 지정하는 속성으로 굵기나 색상 등을 설정

 

 

1. 한개값 입력

margin/padding : 값1 [위, 아래, 오른쪽, 왼쪽]

 

 

 

 

2. 두개값 입력

margin/padding : 값1 [위, 아래]  값2 [오른쪽, 왼쪽]

 

 

 

 

3. 세개값 입력

margin/padding : 값1 [위]  값2 [오른쪽, 왼쪽]  값3 [아래]

 

 

 

 

4. 네개값 입력

margin/padding : 값1 [위]  값2 [오른쪽]  값3 [아래]  값4 [왼쪽]  

시계방향으로 위 → 오른쪽 → 아래 → 왼쪽 

 

 

 

▶ 특정 방향을 지정하여 입력하는 방법

 

1. 위

margin-top : 값

padding-top : 값

 

2. 오른쪽 

 

margin-right : 값

padding-right : 값

 

3. 왼쪽

margin-left : 값

padding-left : 값

 

4. 아래

margin-bottom : 값

padding-bottom : 값

 

 

 

 

▶예제를 통해서 확인해보자.

 

다음과 같은 드롭다운메뉴가 있다.

 

 

 

볼더 굵기를 1px로 주고 색상을 흰색으로 주었다.

 

 

테두리가 생성되는 것을 확인

 

 

 

패딩값을 오른쪽과 왼쪽의 여백을 25px에서 50px로 바꿔보았다.

 

 

볼더 안의 여백이 넓어지는 것을 확인할 수 있다.

 

 

이번엔 마진값을 위아래는 0으로 오른쪽과 왼쪽의 여백을 10px로 주었다.

 

볼더 밖의 여백이 가로방향으로 넓어지는 것이 보인다.