[HTML/CSS] CSS 박스모델

마진(margin) - 경계선(border) - 패딩(padding) - html 요소

margin: 60px;
border: 경계선종류 선의굵기px 선의색상;
padding: 60px;

 

세 속성 모두 top, bottom, left, right 속성을 각각 설정 할 수 있다.

border-top: solid 1px red;
border-bottom: double 1px green;
border-left: solid 1px blue;
border-right: solid 1px pink;

 

margin

마진 초기화 

<style>
* { margin: 0; }
</style>

-> * (모든요소) 마진을 0 으로 설정

 

마진(margin), 패딩{padding) 속성

margin:20px;
margin:10px 20px 30px 40px;
margin: 20px 10px;

 

• 속성을 따로 하지 않고 px 하나만 입력시 한 번에 설정하면 네 방향 모두 같은 값이 적용된다.
• 속성을 따로 하지 않고 4개의 px 입력시 top-right-bottom-left 순서로 적용된다.
• 속성을 따로 하지 않고 2개의 px 입력시 앞px은 상하단, 두번째 px은 좌우측 픽셀로 지정한다.

박스를 중앙에 배치하는 css 코드

margin: 0 auto;

• 위 같이 0 auto 는 상하는 0, 좌우측은 자동으로 가운데로 배치

 

border

경계선 종류

• solid : 실선
• dotted : 점선
• dashed : 파선
• double : 이중

 

둥근 모서리 : border-radius

border-radius: 10px;

• 숫자가 커질수록 더 둥글게

 

박스 그림자 : box-shadow

box-shadow : 5px 5px 10px 색상

순서대로

• 박스의 우측방향 크기
• 박스의 아래방향 크기
• 그림자의 흐림 정도
• 박스 그림자의 색상