jadehan

border, padding ,margin의 개념 정의 본문

IT/Front-end

border, padding ,margin의 개념 정의

PaPhoPu 2016. 3. 1. 16:05

많은 분들이 CSS를 처음 시작하실 때 겪는 어려움은 바로 div 영역에 대한 이해 때문이라고 생각합니다!


이번 포스팅에는 div에 존재하는 margin / border/ padding에 대해서 써보도록 하겠습니다.



 


 

div속성을 이해하는데에는 이만한 그림이 없는 것 같습니다.


margin과 border 사이에 존재하는 실선이 실질적으로


div와 외부를 나누는 경계를 의미하고


그 속으로 border, padding 그리고 컨텐츠가 존재합니다.



우선 margin부터 설명드리자면 div 겉에 있는 영역의 크기를 말합니다.


쉽게 말해 div와 div 사이의 간격을 나타낸다고 볼 수 있겠네요 ^^




1번 div
2번 div
margin값이 0 일때 1번과 2번의 거리


1번 div
2번 div
margin-right값이 5px 일때 1번과 2번의 거리




위의 그림에서 볼 수 있듯이 margin 값은 div와 div간의 간격을 주고 싶을 때


쓴다고 볼 수 있습니다. 



그렇다면!


border 값은 도데체 언제 쓰는 것이란 말인가?!


border값은 쉽게 말해서 div 영역을 표현하는 선의 두께를 말합니다.




1번 div
2번 div
border값이 1px 일때
1번 div
2번 div
border값이 5px 일때




차이가 확연히 드러나죠?


이처럼 border 값은 div하나를 감싸는 선의 두께를 나타낼때 씁니다.


물론 0을 줄 경우 선이 없어지겠죠? ^^


그럼 이제 마지막으로!!!



padding에 대해서 알려드리겠습니다!


padding은 div속의 컨텐츠가 div 경계에서 얼마나 떨어져서 노출되는지를


설정할때 씁니다.


설명이 좀 어렵죠;? 죄송합니다 ㅠㅠ




1번 div
2번 div
padding값이 0 일때


1번 div
2번 div
padding값이 15px 일때


차이가 좀 보이시나요? 여기서 주의하셔야 할 점은 


 padding의 값은 div틀 안에서 문자를 padding값 만큼 밀어내는게 아니라 


 본래 div값에서 padding 값만큼 div경계를 밀어낸다는 사실!!


잊지말아야 할 사실입니다!!


여기까지 margin, border, padding의 차이를


알려드렸습니다.


paphopu였습니다


감사합니다 ^^

0 Comments
댓글쓰기 폼