[HTML][CSS] box model

안쪽 여백은 패딩

 

 

 

바깥 여백은 마진

실제 보여지는 컨텐츠는 체감상

border까지 이다.

margin은 다른 element 와의 간격

또한 패딩과 마진은 속기형으로 작성 가능 1px 0px 0px 10px 등.. (속기는 시계방향 위->오른쪽->아래->왼쪽)

 

.header-box {
    width: 10px;
    height: 10px;
    background-color: rgb(155, 204, 204);
    border: 5px black solid;
    padding: 50px 70px 50px 70px;
    margin: 1px 0px 0px 10px;
}

 

 

 

test 해볼 html 태그

<header class="header-box">JS Test Page</header>

 

디자인 따라 다르겠지만 border style은 solid가 가장 대중적으로 쓰인다.

border-radius: 50%; 로 설정해주면 너비 높이가 같다는 가정하에 동그랗게 보여지게 된다.

여전히 상자( box model)가 맞지만, border를 동그랗게 깎은 것이다. 

 

.header-box {
	width: 100vw;
	width: 100px;
	height: 100px;
	background-color: rgb(155, 204, 204);
	padding-left: 30px;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	border: 1px black solid;
	border: 1px black dashed;
	border: 1px black dotted;
	border-radius: 5px;
	border-radius: 50%;
}

뒤에 쓴 내역들로 덮어씌어진다.

 

 

좌상, 우하만 둥글게 깎을 수도 있다.

.header-box {
	width: 100vw;
	width: 100px;
	height: 100px;
	background-color: rgb(155, 204, 204);
	padding-left: 30px;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	border: 2px black solid;
	border-top-left-radius: 22px;
	border-bottom-right-radius: 22px;
}

위, 아래 보더만 줄 수도 있다.

.header-box {
	width: 100px;
	height: 100px;
	background-color: rgb(155, 204, 204);
	border-top: 5px black solid;
	border-bottom: 5px black solid;
}