반응형
여백 상쇄?
두 요소의 여백이 겹칠 때 더 큰 여백으로 대체되는 것
예) 첫번째 div의 padding-bottom, 두번째 div의 padding-top의 경우 둘 중 더 큰 쪽의 padding을 적용하고 나머지 padding은 상쇄된다.
축약 프로퍼티로 작업(short property)
border: 2px dashed orange
순서는 상관 없다(속성이 다르기 때문)
줄이지 않았으면
border-width: 2px
border-style: dashed | solid
border-color: orange
이렇게 작성해야된다.
margin: 5px 10px 5px 10px(위 오른쪽 아래 왼쪽)
margin: 5px 10px 로 축약 가능
margin: 10px 10px 10px 10px
margin: 10px 10px
margin: 10px
모두 같은 결과
Box-sizing(박스 크기 조정)
box-sizing; content-box; -> 기본 값 width: 100%; margin: 5px; 을 주면 삐져나간다.(스크롤 생김) - ⭐️ 기본값 ⭐️
box-sizing: border-box; -> 지정 값 우리가 원하는 css를 줄 수 있다. (본 아이템의 너비와 높이 설정에 안쪽 여백과 테두리가 포함됨)
반응형