CSS margin, padding, border

margin, padding은 CSS의 주요한 기능이다.

margin은 block 기준 바깥 쪽 거리, padding은 안 쪽 거리를 조절한다. // 아래 그림 참고

 

그리고 padding은 설정 시 block의 크기가 커진다. 즉 padding 설정한 만큼 block이 늘어난다.

 

margin: 10px 10px 10px 10px;

padding: 10px 10px 10px 10px;

 

위와 같이 설정하며, 좌측부터 상우하좌 거리를 의미한다. // 시계방향

 

border는 content 바깥 쪽 테두리를 결정한다.

 

border: 10px solid red;와 같이 설정하며,

 

각각 border-width, border-style, border-color를 의미한다. 따로 설정도 가능하다.

 

border-width: 10px; border-style:solid;  // 글쓴이는 일반적으로 코드량이 적은 방법인 boder: 10px solid;로 작성한다.

 

box-sizing을 통해 border 방향을 변경할 수 있다. // default: content-box. 밖 방향.

box-sizing: border-box; 설정 시 안 쪽으로 border 생성된다.