안녕하세요. 오늘은 CSS margin & padding에 알아볼게요.
margin & padding
설명하게 앞서서 margin과 padding의 뜻을 알아볼게요.
margin(마진)은 두 박스 모델 사이에 여백을 뜻하고,
padding(패딩)은 한 박스 모델에서 테두리와 내용 사이의 여백을 뜻해요.
margin 속성
margin은 요소 주변의 여백을 설정함으로
요소와 요소 사이의 간격을 조정할 수 있어요.
4 가지 방향에 한 번에 똑같이 지정이 가능하거나 특정 방향 지정이 가능해요.
[예: margin - (하이픈) top, right, bottom, left]
/*기본형*/
margin: <크기> | <백분율> | auto
| <크기> | 너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정 | margin: 50px |
| <백분율> | 박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정 | margin: 0.1% |
| auto | display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정 |
다음은 margin 속성의 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델 - 마진</title>
<style>
div {
width:100px;
height:100px;
display:inline-block;
border:1px solid #222;
}
#margin1 { margin:50px; }
#margin2 { margin:30px 50px }
#margin3 { margin:30px 20px 50px }
#margin4 { margin:30px 50px 30px 50px; }
#margin5 { margin-right:20px; }
</style>
</head>
<body>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</body>
</html>
margin 속성을 사용하여 웹 문서를 가운데 정렬이 가능한데요.
웹 문서에서 텍스트 요소를 배치할 때 text-align 속성을 사용해요.
웹 문서를 전체를 배치하고 싶을 때 margin 속성을 사용해요.
margin 속성을 사용하여 웹 문서를 정렬할 때
배치할 요소의 너비값 지정하고
margin-left, margin-right의 속성값을 auto로 지정할 경우
웹 브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동계산해요.
다음은 margin 속성을 사용한 웹문서 가운데 정렬 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>응원 이벤트</title>
<style>
body {
background-color: black;
}
#container {
background-color: aliceblue;
width:600px;
margin:10px auto;
padding: 20px;
}
</style>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<div id="container">
<h1>롯데 자이언츠 선수단 응원메시지 이벤트</h1>
<form>
<fieldset>
<legend>선수단을 응원하고 경품 받자!</legend>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required />
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id="umail" required />
</li>
<li>
<label for="path">경품 목록</label>
<select id="path">
<option value="sign-ball">선수단 사인볼</option>
<option value="home-uniform">홈 레플리카 유니폼</option>
<option value="expedition-unifrom">원정 레플리카 유니폼</option>
<option value="ticket">홈 경기 티켓 2매</option>
</select>
</li>
<li>
<label for="memo">메모</label>
<textarea cols="40" rows="4" placeholder="선수단에게 응원의 메시지를 보내주세요."></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트 결과와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y" value="mailing_yes" />
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked />
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div id="buttons">
<input type="submit" value="이벤트 신청하기" />
<input type="reset" value="취소" />
</div>
</form>
</div>
</body>
</html>
margin 중첩하거나 margin 상쇄는
요소를 배치할 경우 각 요소의 마진과 서로 만나서 마진값이 큰 쪽이 겹쳐져요.
여러 요소를 세로로 배치할 때 맨 위의 마진과 맨 아래 마진에 비해 중간에 있는 마진이 지나치게 커지는 것을 방지해요.
오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않아요.
padding 속성
콘텐츠 영역과 테두리 사이의 여백 설정으로
테두리 안쪽의 여백과 박스 모델에서 마진과 패딩을 지정하는 방법이 유사해요.
위치는 같지 않고 4 개지 방향에 동일하게 지정이 가능하거나 특정 방향으로 지정이 가능해요.
[padding - (하이픈) top, right, bottom, left]
다음은 padding 속성 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스 모델 - 패딩</title>
<style>
h1 {
display:inline-block;
border:1px solid #000;
}
#padding1 { padding:20px 30px 40px 50px; }
#padding2 { padding:20px 30px; }
#padding3 { padding:20px; }
</style>
</head>
<body>
<h1>롯데</h1>
<h1 id="padding1">롯데</h1>
<h1 id="padding2">롯데</h1>
<h1 id="padding3">롯데</h1>
</body>
</html>
여기까지 border margin & padding에 알아봤는데요.
margin과 padding을 잘 사용한다면 재밌게 만들 수 있을 것 같아요.
'Frontend > CSS' 카테고리의 다른 글
| CSS position (0) | 2025.10.26 |
|---|---|
| CSS Layout (display / float / clear) (0) | 2025.10.24 |
| CSS border (0) | 2025.10.20 |
| CSS Box-Model (0) | 2025.10.18 |
| CSS Values & Units (0) | 2025.10.16 |