너비를 설정할 경우 margin값과 padding값이 들어가면
같은 너비를 설정하더라도 크기가 다르게 됩니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#box1{
width:300px;
margin:20px auto;
border: 1px solid black;
}
#box2{
width:300px;
margin:20px auto;
padding:50px;
border: 10px solid black;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
box-sizing이라는 프로퍼티를 사용하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘이지 않습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#box3{
width:300px;
margin:20px auto;
border: 1px solid black;
box-sizing: border-box;
}
#box4{
width:300px;
margin:20px auto;
padding:50px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
'hybrid app > css3' 카테고리의 다른 글
| [css3] prefix free 플러그인 (0) | 2013.08.28 |
|---|---|
| [css3] +, ~ 선택자(selector) (0) | 2013.08.27 |
| [css3] max-width (0) | 2013.08.20 |
| [css3] 속성값 여러개 사용할때 (0) | 2013.08.20 |
| [css3] !important (1) | 2013.08.20 |
