margin, padding 속성

개요

CSS의 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미한다.

width,height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적는다.

사용법

#box{ margin:10px; padding:20px }

예제

<html>
<head>
<style>
	#box1{ width:80px; height: 60px; margin:0px; padding:0px; background-color: cyan}
	#box2{ width:80px; height: 60px; margin:10px; padding:0px; background-color: cyan }
	#box3{ width:80px; height: 60px; margin:0px; padding:10px; background-color:cyan }
	#box4{ width:80px; height: 60px; margin:10px; padding:10px; background-color:cyan }
</style>
</head>

<body>
	<div id="box1">[0,0]</div>
	<div id="box2">[10.0]</div>
	<div id="box3">[0,10]</div>
	<div id="box4">[10,10]</div>
</body>
</html>
출력 결과:
[0,0]
[10.0]
[0,10]
[10,10]