html box model

box model은 html 웹페이지 구성의 기본 개념입니다.

파란색 부분이 실제내용이 담긴 부분(content),

이 content를 감싸는 것을 테두리(border),

content와 border 사이의 공간을 padding 이라고 하며

border 와 바깥에 다른요소 사이의 여백을 margin이라칭합니다.

 

 

 

제가 따로 정리한 내용입니다.

 

다음은 예제입니다.                 

style 태그의 내용은

border : 5px 는 border값을 5픽셀 크기만큼 준다는 것이고  solid red 는 빨간색의 실선을 준다는 뜻입니다.

이후 padding 값을 주면 content 와 border 사이의 공간이 늘어난 것을 알수있습니다.

padding: 30px; 는 content 와 border 사이의 공간에 30px 만큼 공간을 준다는 뜻입니다.

만약 왼쪽만 주고싶다면 padding-left 반대로 오른쪽만 주고싶다면 padding-right 그리고 

위아래는 padding-top , padding-bottom 이라 쓰고 값을 주면됩니다.

 

다음은 margin값에 대한 설명입니다.

h1과 똑같은 값으로 p태그를 추가했습니다.

h1과 p태그에 공간이 너무 가까워서 떨어뜨리고 싶으면 어떻게 할까요?

 

이런식으로 h1태그에 margin-bottom : 200px; 을 주면

h1태그 밑으로는 200px 만큼의 여백이 생깁니다

이런식으로 margin 은 border 와 바깥에 다른요소 사이의 여백을 값을 준만큼 만듭니다.