반응형
여백
안쪽여백 - 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>반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 글자효과(color, text-align, text-decoration..) (0) | 2023.07.07 |
|---|---|
| [CSS] 높이, 너비 사이즈 (0) | 2023.07.07 |
| [CSS] 테투리(경계선) (0) | 2023.07.06 |
| [CSS] 배경 (0) | 2023.07.06 |
| [CSS] 색상표현 (0) | 2023.07.06 |
