margin/padding/border

 

CSS 박스 모델에서의 margin과 padding, border란 무엇인가?

 

 

 

border - 박스의 테두리

• border 생성: 1px solid black
• 너비, 스타일 색상 순서
• border는 block과 inline 모두에 적용

 

 

margin - 박스의 경계 바깥의 공간

• 순서: 위 - 오른쪽 - 아래 - 왼쪽

margin: 5px; /* 상하좌우 모두 적용 */

margin: 5px 10px; /* 위아래 5px10px, 좌우 */

margin: 5px 10px 15px; /* 위 5px, 좌우 10px, 아래 15px */

margin: 5px 10px 15px 20px; /* 위, 오른쪽, 아래, 왼쪽(시계방향) */

 

 

padding - 박스의 경계로부터 안쪽의 공간

• margin과 마찬가지로 위, 오른쪽, 아래, 왼쪽 순서로 적용됨