2018-05-10 TIL(CSS)

CSS

CSS 박스 모델

콘텐츠, 패딩, 보더, 마진

블록요소와 인라인 요소

블록 요소 : 가로/세로 마진을 모두 가짐
인라인 요소 : 가로 마진만 가짐

마진 겹칩

세로의 경우 둘 중 큰 값만이 적용됨

내부 여백(패딩)

패딩과 마진을 구분하는 방법은 백그라운드 컬러를 지정한 후 요소가 차지하는 공간을 확인

box-sizing

border-box로 지정하면, 요소의 width값에 맞추어 paddig, border값을 제외한 width가 새로 적용됨.

콘텐트 = width가 아닌 콘텐츠 + 보더 + 마진 = width로 적용됨.

float

clear

float때문에 블록 속성을 가지지 못한 요소에게 블록 속성을 갖게함.

Comments