margin 예제
<style>
div {
margin: 100px;
border: 1px solid red;
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
margin 정의
요소 바깥쪽 여백 지정. (음수 가능.)
1.margin , padding, border 값은 요소가 차지 하는 너비에 포함. 사용시 주의. 관련 내용 보기
2.
margin : background-color 반영 X background-color 반영 O
3.
두 요소의 margin 값이 겹치는 경우엔 마진병합 발생.
(아래 예제 참고)
4.<tr> 요소 : margin 적용 X , padding 적용 X <td> 요소: margin 적용 X , padding 적용 O
(아래 예제 참고)선겹침 제거 팁 : margin-right:-1px;
(아래 예제 참고)
margin-right 구문
selector {margin-right: length |auto|initial|inherit;}
[속성값]
length
px, pt, cm 등의 길이단위 숫자. (기본값: 0px)
%
보모 요소 너비의 % 숫자.
auto
브라우저 자동 설정. (※ Block 요소 중앙정렬시킬 때 유용)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
※ margin: 음수 가능. (cf. padding: 음수 불가능)
※ 음수 margin : 반응형 홈페이지 만들 때 유용.
margin 속성값 개수 ★ (※ 안쪽 여백 속성인 padding도 마찬가지)
1개 : (상단 우측 하단 좌측)을 한번에 묶어 지정 (예) 선택자 {margin: 10px ;} 상우하좌 10px
상하 , 좌우 끼리 묶어 지정 (예) 선택자 {margin: 10px 20px ;} 상하 10px, 좌우 20px
상 , 좌우 , 하 순으로 배열 (예) 선택자 {margin: 10px 20px 30px;} 상10px 좌우20px하30px
상 우 하 좌 개별 지정 (예) 선택자 {margin: 10px 20px 30px 40px;} 상10px 우20px 하30px 좌40px : 시계방향
margin 속성을 이용해 상우하좌를 모두 정의할 수 있지만,
selector {margin-top : 10px;} - 상단 여백
selector { margin-right : 20px;} - 우측 여백 selector { margin-bottom : 30px;} - 하단 여백 selector { margin-left : 40px;} - 좌측 여백
margin・padding 차이점
margin
padding 요소 내부의 왼쪽 상단을 기준으로 내용물이 얼마나 멀리 위치하나 지정.
[내부스타일 방식]
<style>margin {margin: 10px 20px 30px 40px ; border: 1px solid #333333;}
<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) = 80px (X) , 50px (O)
<style>
.top {border:1px solid red; width:100px; height:50px; line-height:50px; text-align:center; margin-bottom:50px; }
.bottom {border:1px solid red; width:100px; height:50px; line-height:50px; text-align:center; 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 ) = -77px 적용 (X) , -52px 만 적용.
<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 예제 : <tr> vs. <td>
<tr> 요소 <td> 요소 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 }
<style>
div {
margin:auto;
padding:50px;
width:200px;
color:white;
background:red;
}
</style>결과보기
※ 상하마진을 주려면 margin:OOpx auto; 식으로 줌.
※ 인라인요소 중앙 정렬은 부모 요소에 text-align:center 속성 줌.
margin 예제 - 선겹침 제거
겹치는 곳의 테두리 두께만큼 한쪽에 역마진 (= 음수마진) 주면 됨.
<style>
div {border:3px solid red; margin:0;}
div:nth-child(2) {margin-top:-3px;}
<div>홈짱닷컴 Homzzang.com</div>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
