1주차 (CSS - margin, padding)

pc_jin·2022년 4월 5일
0

내배단

목록 보기
4/11

CSS

margin, padding 개요

margin : 바깥쪽 여백

padding : 안쪽 여백

사용법

  • margin: 10px : 상하좌우 모두 10px

  • margin: 10px 20px : 상하 10px, 좌우 20px

  • margin: 10px 20px 30px 40px : 상 10px, 우 20px, 하 30px, 좌 40px (시계방향)

  • margin: 10px 20px 30px : 상 10px, 좌우 20px, 하 30px

<style>
	#box4{ margin: 10px; padding: 10px 20px; }
</style>

예제

<head>
<style>
	.box-container{
		display: inline-block;
		background-color: skyblue;
		border: 2px solid blue;
		margin: 5px 15px;
	}
	.box-container div{
		width: 120px;
		height: 80px;
		background-color: pink;
		border: 2px solid red;
		font-size: 15px;
	}
	#box1{ margin: 10px;  padding: 0px; }
	#box2{ margin: 5px 25px; padding: 0px; }
	#box3{ margin: 0;  padding: 10px 30px 5px; }
	#box4{ margin: 10px; padding: 10px 20px; }
	#box5{ margin: 10px 30px 0 50px; padding: 30px 0px;}
</style>
</head>

<body>
    <p>box1</p>
	<div class="box-container">
		<div id="box1">m: 10<br>p: 0</div>
	</div>
    <p>box2</p>
	<div class="box-container">
		<div id="box2">m: 5 25<br>p: 0</div>
	</div>
    <p>box3</p>
	<div class="box-container">
		<div id="box3">m: 0<br>p: 10 30 5</div>
	</div>
    <p>box4</p>
	<div class="box-container">
		<div id="box4">m: 10<br>p: 10 20</div>
	</div>
    <p>box5</p>
	<div class="box-container">
		<div id="box5">m: 10 30 0 50<br>p: 30 0</div>
	</div>
</body>
</html>

출력결과

profile
개발 블로그🌐 개발일지💻

0개의 댓글