• Q&A
  • 회원가입
  • 로그인

[box] CSS - 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-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

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 속성을 이용해 상우하좌를 모두 정의할 수 있지만,
아래처럼 개별 정의도 가능하며, 한쪽만 정의하는 것도 가능.
 
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;}
.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)  =   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> 요소
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}

 


 

<style>

div { 

  margin:auto;

  padding:50px;

  width:200px;

  color:white;

  background:red;

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

결과보기

※ 상하마진을 주려면 margin:OOpx auto; 식으로 줌.
※ 블럭요소가 중앙 정렬되려면 width 값이 있어야 함. (단, 100% 주면 안 됨.)
※ 인라인요소 중앙 정렬은 부모 요소에 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>

 

결과보기

nth-child() 선택자

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012