<div> 태그를 두개 만들어
각각 다른 색상과 다른 두께를 적용시켰다
그러면 이렇게 10px인 초록색 border(테두리,경계선) 와
5px 인 빨간색 border(테두리,경계선) 가 그려지는걸 볼 수 있다
여기서 padding 속성을 더 입혀보자
각각 10px, 5px값을 적용시켰다
그러면 이렇게 나오는 걸 볼 수 있다
이렇게 노란색 줄로 표시된 곳이 padding 박스(공간) 이다
여기서 margin 속성을 더 입혀보자
이렇게 옅은 보라색으로 표시된 곳이 margin 이다
padding 은 안쪽 margin은 바깥쪽 이라고 이해하면 편할듯 하다
해당 태그의 padding: 10px 이란 속성은
이라는 뜻과 같다
만약 내가 padding 사이즈를 조절하고 싶으면
이런식으로 순서는 top, right, bottom, left 순서이다
그리고 padding: 10px 5px; 이렇게 두개의 값만 기록하면
이라고 한다
그리고 padding: 10px 5px 8px; 이렇게 세개의 값만 기록하면
이라고 한다
요약하면
padding:10px; 는 top, right, bottom, left 가 전부 10px
padding:10px 5px; 는 10px = top,bottom 5px = right, left
padding:10px 5px 8px; 는10px = top, 5px = right, left 8px = bottom
border 와 margin도 동일한 원리라고 한다
박스 크기를 max- , min- 값으로 최대,최소 크기를 조정할 수 있다고 한다
'css' 카테고리의 다른 글
| border 스타일링 (0) | 2023.09.08 |
|---|---|
| background 스타일링 (0) | 2023.09.08 |
| 표 스타일링 (0) | 2023.09.08 |
| 링크와 커서 스타일링 (0) | 2023.09.08 |
| 목록 스타일링 (0) | 2023.09.08 |
