728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>box-sizing</title>
<meta charset="UTF-8">
<style>
div:nth-child(1) {
width: 100px;
background-color: black;
color: white;
/**/
}
div:nth-child(2) {
width: 100px;
height: 20px;
background-color: red;
box-sizing: border-box;
/* box-sizing ㅣ 요소의 크기 지정에 관한 방법 설정
content-box : 요소의 내부 내용에 따른 크기 지정(기본값)
border-box : 요소의 테두리 내용에 따른 크기 지정
*/
color: white;
padding: 0 10px;
}
</style>
</head>
<body>
<div>나는 100px</div>
<div>아무 내용</div>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| cursor(커서모양) (0) | 2022.12.24 |
|---|---|
| color(색상) (0) | 2022.12.24 |
| box-shadow(박스그림자) (0) | 2022.12.21 |
| border(테두리) (0) | 2022.12.21 |
| background-color(배경색) (0) | 2022.12.21 |