web_frontend(15)CSS margin과 padding

margin과 padding 

 

margin

요소의 외부 여백(공간)을 지정하는 단축 속성

 

음수를 사용할수 있음

 

0 : 외부 여백 없음

auto : 브라우저가 여백을 계산 (가로(세로)너비가 있는 요소의 가운데 정렬에 활용한다.

단위 : px, em, vw등 단위로 지정

% 부모 요소의 가로 너비에 대한 비율로 지정 -> 거의 사용하지 않음

 

{
margin: 10px; 모든방향
margin-bottom: 10px; 이런식으로 -다음에 bottom, top, left, right로 상하좌우도 조절 가능
margin: 10px 20px; 은 각각 상하, 좌우를 조절 
magin: 10px 20px 30px;  상   좌우 하를 조절
magin: 10px 20px 30px 40px; 상 우 하 좌 위부터 시계방향
}

 

 

padding 

요소의 내부 여백(공간)을 지정하는 단축속성 -> 패딩을 주면 요소 자체의 크기가 커진다.

 

0 : 내부 여백 없음

단위 : px, em, vw 등 단위로 지정

% : 부모 요소의 가로 너비에 대한 비율로 지정 -> 마진과는 다르게 때에따라 사용된다.

 

{
padding: 10px; 모든방향
padding-bottom: 10px; 이런식으로 -다음에 bottom, top, left, right로 상하좌우도 조절 가능
padding: 10px 20px; 은 각각 상하, 좌우를 조절 
padding: 10px 20px 30px;  상   좌우 하를 조절
padding: 10px 20px 30px 40px; 상 우 하 좌 위부터 시계방향
}