css : margin, padding 개념과 한줄쓰기

 

margin, padding, content 그리고 border

 

기준은 content와 border이다. 글자면 글자, 그림이면 그림이 content가 되고, 그걸 둘러싼 테두리를 border라고 한다. 테두리와 콘텐츠 간에 거리를 두고싶다면 padding을 조절하고, 해당컨텐츠가 아닌 다른 컨텐츠와의 거리를 조절하고싶으면 margin을 조절한다.

- Margin , Padding 한줄에 쓰기

ex_ padding : 10px 20px 30px 40px; 이라고 설정되어있으면 순서대로 위 오른쪽 아래 왼쪽이다. (시계방향) 

padding : 10px 20px; 와 같이 2개만 적혀있다면  상하가 10px로 같고 좌우가 20px로 같음을 의미한다.

padding : 10px 5px 20px; 과 같이 3개만 적혀있으면, 위가 10px 좌우 5px, 아래를 20px로 설정해주라는것과 같다.