목차
- margin 예제 - 바깥 여백 (= 요소간 간격)
- margin 정의
- margin 구문
- margin 속성값 개수 ★
- margin 개별 지정
- margin vs. padding 비교
- margin 병합1 - 양수/양수 경우, 절대값 큰 값만 적용
- margin 병합2 - 양수/음수 경우, 더한 값 적용
- margin 병합3 - 음수/음수 경우, 절대값 큰 값만 적용
- margin 병합4 - 마진 병합은 상하 마진에서만 적용
- margin 예제 : <tr> vs. <td>
- margin 예제 - 블럭요소 중앙정렬
- margin 예제 - 선겹침 제거
margin 예제 - 바깥 여백 (= 요소간 간격)
<style>
div {
margin: 100px;
border: 1px solid red;
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
margin 정의
요소 바깥 여백 지정.
(※ 음수 지정 가능.)
1.
margin, padding, border 값은 요소가 차지하는 너비에 포함.
사용시 주의. 관련 내용 보기
2.
margin : background-color 반영 X
padding : background-color 반영 O
3.
두 요소의 margin 값이 겹치는 경우엔 마진병합 발생.
(아래 예제 참고)
4.
<tr> 요소 : margin 적용 X , padding 적용 X
<td> 요소: margin 적용 X , padding 적용 O
(아래 예제 참고)
5.
선겹침 제거 팁 : margin-right:-1px;
※ 두께만큼 테두리 역마진 (음수마진) 적용. 아래 예제 참고.
margin 구문
selector {margin: length|auto|initial|inherit;}
[속성값]
length
px, pt, cm 등의 길이단위 숫자. (기본값: 0px)
%
보모 요소 너비의 % 숫자.
auto
브라우저 자동 설정. (※ Block 요소 중앙정렬시킬 때 유용)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
※ margin: 음수 가능. (cf. padding: 음수 불가능)
※ 음수 margin : 반응형 홈페이지 만들 때 유용.
margin 속성값 개수 ★
1개 : (상단 우측 하단 좌측)을 한번에 묶어 지정
(예) 선택자 {margin: 10px;} 상우하좌 10px
2개 : 상하, 좌우끼리 묶어 지정
(예) 선택자 {margin: 10px 20px;} 상하10px, 좌우 20px
3개 : 상, 좌우, 하 순으로 배열
(예) 선택자 {margin: 10px 20px 30px;} 상10px 좌우20px하30px
4개 : 상 우 하 좌 개별 지정
(예) 선택자 {margin: 10px 20px 30px 40px;} 상10px 우20px 하30px 좌40px : 시계방향
margin 개별 지정
margin vs. padding 비교
margin
요소 바깥의 요소 (바깥 쪽에 요소가 없을 경우 브라우저 왼쪽 상단) 기준으로 요소가 얼마나 멀리 위치하나 지정.
padding
요소 내부의 왼쪽 상단을 기준으로 내용물이 얼마나 멀리 위치하나 지정.
[내부스타일 방식]
<style>
.margin {margin: 10px 20px 30px 40px; border: 1px solid #333333;}
.padding {padding: 10px 20px 30px 40px; border: 1px solid #333333;}
</style>
<div class="margin">
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
<div class="padding">
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
[인라인 스타일 방식]
<div style="margin: 10px 20px 30px 40px; border: 1px solid #333333;">
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
<div style="padding: 10px 20px 30px 40px; border: 1px solid #333333;">
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
결과 보기
▒ 마진 병합
margin 병합1 - 양수/양수 경우, 절대값 큰 값만 적용
양수와 양수의 margin 병합: 둘 중 절대값이 큰 값만 적용,
(예) margin (50px + 30px) = 50px (O) ※ 주의: 80px (X)
[예제]
<style>
div {
border:1px solid red; width:100px; height:50px; line-height:50px; text-align:center;}
.top {margin-bottom:50px;}
.bottom {margin-top:30px;}
</style>
<div class="top">상단</div>
<div class="bottom">상단</div>
결과 보기
margin 병합2 - 양수/음수 경우, 더한 값 적용
두 값을 더한 값을 적용 (O).
즉, 50px와 -40px를 더한 값인 10px가 적용.
[예제]
<style>
* {border:1px solid red; width:100px; height:50px; line-height:50px; text-align:center; }
.top {margin-bottom:50px;}
.bottom {margin-top:-40px;}
</style>
<div class="top">상단</div>
<div class="bottom">상단</div>
결과 보기
margin 병합3 - 음수/음수 경우, 절대값 큰 값만 적용
둘 중 절대값이 큰 값만 반영 (O).
(예) margin( -25px -52px) = -52px ※ 주의: -77px (X)
<style>
* {border:1px solid red; width:100px; height:50px; line-height:50px; text-align:center; }
.top {margin-bottom:-25px;}
.bottom {margin-top:-52px;}
</style>
<div class="top">상단</div>
<div class="bottom">하단</div>
결과 보기
margin 병합4 - 마진 병합은 상하 마진에서만 적용
상하 마진 : 마진 병합 적용 O
좌우 마진 : 마진 병합 적용 X
[예제] - 좌우 마진 사이에선 마진 병합 X. (∴ 두 요소간 거리: 150px)
<style>
p {display:inline-block; border:1px solid}
p.a {margin: 0 50px;}
p.b {margin: 0 100px;}
</style>
<p class="a">홈짱닷컴</p>
<p class="b">Homzzang.com</p>
결과보기
PS. 주의
1.
inline, inline-block 경우 각 요소별로 16px 폰트 사이즈 기준으로 기본 4px 정도 추가 여백 생김. 게다가, 폰트 종류 영향 받아 실제 4px+-a 여백 생김.
※ 이 문제 해결하려면, 아래 2가지 방법 중 하나를 사용 필요. 자세히 보기.
① 태그 사이의 공백 제거 + 고정폭 폰트 사용. (예제1, 예제2)
② display:inline-block 대신 float:left 속성 이용. (예제)
2.
화면 해상도나 화면 확대 비율에 따라 요소간 간격이 달라져 보일 수 있음.
margin 예제 : <tr> vs. <td>
<tr> 요소
margin 적용 X , padding 적용 X
<td> 요소
margin 적용 X , padding 적용 O
<tr> 예제
<style>
table {
border:1px solid red;
border-collapse:collapse;
}
tr {
margin:50px;
padding:50px;
background:yellow;
border:5px solid blue;
}
td {
width:200px;
height:200px;
text-align:center;
border:5px solid red;
}
</style>
<table>
<tr><td>홈짱닷컴</td></tr>
<tr><td>Homzzang.com</td></tr>
</table>
결과 보기
<td> 예제
<style>
table {
border:1px solid red;
border-collapse:collapse;
}
tr {
background:yellow;
border:5px solid blue;
}
td {
margin:50px;
padding:50px;
width:200px;
height:200px;
text-align:center;
border:5px solid red;
}
</style>
<table>
<tr><td>홈짱닷컴</td><td>홈짱닷컴</td></tr>
<tr><td>Homzzang.com</td><td>Homzzang.com</td></tr>
</table>
결과 보기
margin 예제 - 블럭요소 중앙정렬
selector {margin:auto; width:OOpx}
PS. 주의: 부모요소 너비보다 작아야 중앙정렬 적용됨.
<style>
div {
margin:auto;
padding:50px;
width:200px;
color:white;
background:red;
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
※ 상하마진도 함께 적용 : margin:OOpx auto; 적용.
※ 인라인요소 중앙 정렬 : 부모 요소에 text-align:center 적용.
margin 예제 - 선겹침 제거
겹치는 곳의 테두리 두께만큼 한쪽에 역마진 (= 음수마진) 지정.
[예제]
<style>
div {border:3px solid red; margin:0;}
div:nth-child(2) {margin-top:-3px;}
</style>
<div>홈짱닷컴 Homzzang.com</div>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
