[CSS3] margin과 padding (여백)

CSS의 여백

1. margin(요소의 바깥쪽 여백)
- 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용.
- 상단, 오른쪽, 하단, 왼쪽 각각 설정 가능.
- 사용법
margin: 10px 20px 30px 40px ==> 상단, 오른쪽, 하단, 왼쪽
margin: 10px 20px 30px==> 상단, [오른쪽,왼쪽], 하단
margin: 10px 20px ==> [상단, 하단], [오른쪽, 왼쪽]
margin: 10px ==> [상단, 하단, 오른쪽, 왼쪽]

2. padding(요소의 안쪽 여백)
- 단위 : px, em, cm
- 사용법
padding: 10px 20px 30px 40px ==> 상단, 오른쪽, 하단, 왼쪽
padding: 10px 20px 30px==> 상단, [오른쪽,왼쪽], 하단
padding: 10px 20px ==> [상단, 하단], [오른쪽, 왼쪽]
padding: 10px ==> [상단, 하단, 오른쪽, 왼쪽]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0;
}

.box1{
	width: 300px;
	height: 200px;
	background-color: red;
	margin : 10px 10px 10px 10px; /*바깥 여백 : 상단, 오른족, 하단, 왼쪽*/
}

.box1{
	width: 300px;
	height: 200px;
	background-color: skyblue;
	padding: 20px;
}


</style>

</head>

<body>

<div class="box1">1</div>
<div class="box2">2</div>

</body>
</html>

저작자표시

'Front > CSS' 카테고리의 다른 글

[CSS3] float 속성 (0)	2021.04.22
[CSS3] border 속성 (0)	2021.04.22
[CSS3] display 속성 (0)	2021.04.22
[CSS3] em 단위 (0)	2021.04.22
[CSS3] 블록 레벨, 인라인 레벨 (0)	2021.04.20