- 마진값을 0 으로 할때는 px 같은 단위를 붙이지 않습니다. 그냥 0 입니다.
- 두번째 예제에서 파란색 div 의 margin 설정때문에 빨간색 div 와 공백이 생겼습니다.
margin
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
margin 은 바깥쪽의 여백을 설정합니다.
참고로 padding 은 안쪽 여백을 설정합니다.
예제 1
바깥쪽 여백 지정해보기
보기
파란색 네모칸에 margin 을 설정하였습니다.
margin : 10px
margin : 20px
margin : 0
소스
파란색 네모칸에 margin 을 설정하였습니다.<br><br>
<div style="border:1px solid red;">
<div style="border:1px solid blue; margin:10px;">margin : 10px</div>
</div>
<br>
<div style="border:1px solid red;">
<div style="border:1px solid blue; margin:20px;">margin : 20px</div>
</div>
<br>
<div style="border:1px solid red;">
<div style="border:1px solid blue; margin:0;">margin : 0</div>
</div>
<div style="border:1px solid red;">
<div style="border:1px solid blue; margin:10px;">margin : 10px</div>
</div>
<br>
<div style="border:1px solid red;">
<div style="border:1px solid blue; margin:20px;">margin : 20px</div>
</div>
<br>
<div style="border:1px solid red;">
<div style="border:1px solid blue; margin:0;">margin : 0</div>
</div>
설명
예제 2
실습 - margin 조절해 보기
보기
margin 보기
설명
- 슬라이더를 움직이면 파란색 div 의 margin 을 조절할 수 있습니다.
- margin 이 커지면 바깥쪽 여백이 늘어나서 빨간색 div 와 벌어집니다.
- margin 이 커지면 바깥쪽 여백이 늘어나서 빨간색 div 와 벌어집니다.
예제 3
실습 - 각각의 이미지에 margin 적용하기
보기
|
설명
- 슬라이더를 움직이면 위 모든 이미지에 margin 이 적용됩니다.
예제 4
실습 - 각각의 이미지에 margin 적용하기 (2개 속성)
보기
|
설명
- 두개의 속성을 지정하면 위 예제 처럼 동시에 값을 조절할 수 있습니다.
- margin : 위,아래 여백 오른쪽,왼쪽 여백;
- margin : 10px 20px ; 이렇게 말이죠.
- margin : 위,아래 여백 오른쪽,왼쪽 여백;
- margin : 10px 20px ; 이렇게 말이죠.
예제 5
실습 - 박스 모델 (Box Model) 이해 하기
보기
+ CSS 연구소 +
아래 슬라이더를 움직여 보세요.
아래 슬라이더를 움직여 보세요.
설명
예제 6
실습 - 가운데 그림을 기준으로 margin 을 설정합니다
보기
설명
슬라이더를 움직여 보세요 ^^
- margin : 10px; 처럼 하나의 값만 사용하면 사방으로 같은 여백이 설정됩니다.
- 가운데만 margin 을 설정하기 때문에 위의 "새" 예제와는 결과가 다릅니다.
- margin : 10px; 처럼 하나의 값만 사용하면 사방으로 같은 여백이 설정됩니다.
- 가운데만 margin 을 설정하기 때문에 위의 "새" 예제와는 결과가 다릅니다.
예제 7
실습 - 가운데 그림을 기준으로 margin 을 설정합니다
보기
예제 8
실습 - 가운데 그림을 기준으로 margin 을 설정합니다
보기
설명
슬라이더를 움직여 보세요.
가운데 이미지를 기준으로 바깥쪽 여백이 설정됩니다.
- margin : 위 오른쪽 아래쪽 왼쪽 ;
- 공백으로 구분하여 각각의 값을 입력하면 됩니다.
- 위 부터 시작하여 시계방향으로 위 > 오른쪽 > 아래쪽 > 왼쪽 으로 외우면 쉽습니다.
가운데 이미지를 기준으로 바깥쪽 여백이 설정됩니다.
- margin : 위 오른쪽 아래쪽 왼쪽 ;
- 공백으로 구분하여 각각의 값을 입력하면 됩니다.
- 위 부터 시작하여 시계방향으로 위 > 오른쪽 > 아래쪽 > 왼쪽 으로 외우면 쉽습니다.
연구 1
겉보기에 같은것들
보기
파란색 DIV margin : 10px;
빨간색 DIV padding : 10px;
소스
<div style="border:1px solid red;">
<div style="border:1px solid blue; margin:10px;">파란색 DIV margin : 10px;</div>
</div>
<br>
<div style="border:1px solid red; padding:10px;">
<div style="border:1px solid blue;">빨간색 DIV padding : 10px;</div>
</div>
<div style="border:1px solid blue; margin:10px;">파란색 DIV margin : 10px;</div>
</div>
<br>
<div style="border:1px solid red; padding:10px;">
<div style="border:1px solid blue;">빨간색 DIV padding : 10px;</div>
</div>
연구 2
width 와 margin 으로 DIV 가운데 정렬하기
보기
DIV 가운데로 정렬하기
소스
<div style="width:300px; margin:0 auto; background:yellow;">DIV 가운데로 정렬하기</div>
설명
- DIV 는 table 과 달리 가운데 정렬이 좀 번거롭습니다.
- 테이블의 경우 align="center" 속성만 넣어주면 끝인데 말이죠.
- width 값을 설정하고 margin:0 auto; 처럼 설정해 주면됩니다.
- 테이블의 경우 align="center" 속성만 넣어주면 끝인데 말이죠.
- width 값을 설정하고 margin:0 auto; 처럼 설정해 주면됩니다.
+ 관련 CSS +