BOX
- border: {width} {style} {color}
- padding - Box 내부 여백
- margin - 테두리 밖 여백 ( box간 margin은 중첩됨 )
- width/height - 너비,높이
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:10px solid red;
padding:100px;
margin: 100px;
width: 300px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, expedita.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, expedita.
</p>
</body>
</html>
- box-sizing: border-box - border 기준으로 사이징
- box-sizing: content-box - content 기준으로 사이징 ( default )
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin:10px;
width:300px;
box-sizing: border-box; /*border크기로 사이징 가능*/
/* box-sizing: content-box; content크기로 사이징 */
}
#small{
border:10px solid black;
background-color: red;
}
#large{
border:30px solid black;
background-color: green;
}
</style>
</head>
<body>
<div id="small">small border</div>
<div id="large">Large border</div>
</body>
</html>
