Front-end/Css
[CSS] 여백(margin, padding)
sky-j
2023. 7. 6. 17:30
반응형
여백
안쪽여백 - padding, 테두리 안쪽 요소 콘텐츠 바깥쪽의 공간
바깥쪽여백 - margin, 테두리 바깥쪽 부모요소의 안쪽 공간
★ padding : 요소의 각 면에 안쪽여백을 설정
- padding-top, padding-right, padding-bottom, padding-left
- padding: 50px 30px 50px 80px
- top > right > bottom > left
- top > right/left > bottom
- top/bottom > right/left
★ margin : 요소의 각 면에 바깥쪽여뱍을 설정
- padding과 동일하게 각 면의 바깥쪽여백을 설정할 수 있음.
※ 핵심 속성값 : auto. 브라우저가 여백을 계산하여 요소를 배치.
좌우만 적용. 요소를 수평 중앙에 배치]
margin_auto.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여백</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
border: 1px solid red;
margin: auto;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>반응형