CSS입문
CSS_Box관련속성(padding-boxsizing)_22.04.08(Fri)
양빵빵
2022. 4. 8. 15:55
padding
요소의 내부 여백을 지정
- px, em, % 등 단위로 지정
- 기본값 0값을 %로 지정하면 부모요소의 width의 비율로 여백을 가짐
- 패딩을 사용하면 그만큼 박스 크기가 증가합니다.
- ex) 가로세로 100px인 박스에 상하좌우 20px의 패딩을 적용하면 박스크기가 140 x 140 이됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
background: orange;
margin-left: 100px;
padding-left: 100px;
margin-top: 50px;
padding-top: 50px;
}
/* padding 속성은 좌우지정시 가로길이가 그만큼 늘어나고,
상하지정시 세로길이가 늘어남 */
.box {
width: 250px;
height: 250px;
background: tomato;
color:white;
font-size: 2em;
padding-top: 30px;
padding-left: 20px;
padding: 30px 0 0 20px;
/* margin과 단축속성은 동일. */
box-sizing: border-box;
/* padding 적용시 가로 세로는 기존 가로세로 값에 더해져서 커진다.
padding 사용으로 길이가 증가하는 것을 방지
box-sizing: border-box; */
}
</style>
</head>
<body>
<div class="container">
<div class="box">안녕하세요.</div>
</div>
</body>
</html>