CSS - 여백 관련 속성 margin, padding

공부

CSS - 여백 관련 속성 margin, padding

푸쥬 ! 2022. 3. 22. 17:10

margin padding 둘 다 여백을 만들어내지만, 만드는 위치가 다르다.

바깥 여백 : margin

안쪽 여백 : padding

1. 특정 위치 지정

margin-"위치", padding-"위치" 형식으로 사용 가능

"위치" 자리에는 top, bottom, left, right 값이 들어갈 수 있음

margin-top : 10px

2. 수치 나열

위치 지정 없이 값을 쭉 나열해도 상관없음.

순서는 상, 우, 하, 좌 (시계방향)

margin : 10px #상하좌우 모두 10px 여백

margin: 10px 20px #상하 10px, 좌우 20px 여백
margin: 10px 20px 30px 40px #상 10px, 우 20px, 하 30px, 좌 40px
margin: 10px 20px 30px #상 10px, 좌우 20px, 하 30px

예제)

<html>
<head>
<style>
	.test{
		display: inline-block;
		background-color: #A5FFE4;
		border: 1px solid #09c;
		margin: 10px 20px;
	}
	.test div{
		width: 150px;
		height: 150px;
		background-color: #FAFAD2;
		border: 1px solid #90C;
		font-size: 15px;
	}
	#test1{ margin: 10px;  padding: 0px; }
	#test2{ margin: 10px 20px; padding: 0px; }
	#test3{ margin: 10px; padding: 10px 20px; }
	#test4{ margin: 10px 20px 30px; padding: 20px 0px; }
</style>
</head>

<body>
	<div class="test">
		<div id="test1">margin: 10<br>padding: 0</div>
	</div>
	<div class="test">
		<div id="test2">margin: 10 20<br>padding: 0</div>
	</div>
	<div class="test">
		<div id="test3">margin: 10<br>padding: 10 20</div>
	</div>
	<div class="test">
		<div id="test4">margin: 10 20 30<br>padding: 20 0</div>
	</div>
</body>
</html>

margin: 10
padding: 0

margin: 10 20
padding: 0

margin: 10
padding: 10 20

margin: 10 20 30
padding: 20 0

현재글CSS - 여백 관련 속성 margin, padding

Show me the way