HTML & CSS
margin/padding/border
kelly09
2024. 2. 1. 16:17
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과 마찬가지로 위, 오른쪽, 아래, 왼쪽 순서로 적용됨