본문 바로가기
기타/컴맹에서 태그까지

margin <P style="MARGIN-LEFT: 숫자px">

by 이태일, 태라라 2015. 12. 7.

    등선폭포 -이태일 태라라- 대지에 생명줄 이어주는 쉼없는 물줄기 한강을 채우는 한결같은 마음 바위산이 어긋난 틈새에 계곡을 만들어 변함없는 사랑의 소리를 낸다 구곡폭포에 알리는 구애의 소리일까? 인간을 사랑하는 포옹일까? 어머니의 영혼이 나를 부르는 울부짖음은 아닐까? 어머니 같은 저 폭포.

 

 

 

margin 속성은 개체의 바깥쪽 여백을 조절할 수 있습니다. margin 은 백그라운드로 색상을 적용할 수 없으며 투명으로만 처리할 수 있습니다. 4가지 속성값인 margin-top, right, bottom, left 로 각각 적용이 가능하며 한번에 상하 좌우를 적용할 수도 있습니다.

 

아래 각각의 샘플은 margin-top, margin-right, margin-bottom, margin-left div 에 적용한 결과입니다. 한쪽만 적용했을 때 다른 div 개체와 함께 어떤 식으로 표현이 되는지 쉽게 이해가 가실 겁니다.

 

스타일시트 CSS margin 을 주는 방법

 

스타일시트 CSS margin 을 주는 방법

 

스타일시트 CSS margin 을 주는 방법

 

스타일시트 CSS margin 을 주는 방법

 

이렇게 각각 한쪽만 표현하거나 한번에 margin 속성으로 표현할 수도 있습니다. 아래 샘플처럼 margin: 30px 30px 30px 30px 로 값을 셋팅 하시면 4방향 모두 30px 씩 적용이 됩니다. 방향은 시계 방향으로 첫 번째 값이 top 이며 마지막이 left 입니다. 중간에 적용시키고 싶지 않은 영역이 있다면 0 을 표현하시면 되겠죠.

 스타일시트 CSS margin 을 주는 방법

 

아래 소스는 margin 을 적용한 전체 테스트 소스와 실행한 결과 화면입니다. 참고하시기 바랍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> 정렬 </title>
<style type="text/css">
    .vi{
        border-radius: 5px;
        background-color: #2e5b86;
        border-style: solid;
        border-color: #5d5d5d;
        border-width: 1px;
        color: #FFFFFF;
        padding:15px
    }
    .top { margin-top: 30px; }
    .right { margin-right: 30px; }
    .bottom { margin-bottom: 30px; }
    .left { margin-left: 30px; }
    .margin-all {margin: 30px 30px 30px 30px}
    body {margin: 0px 0px 0px 0px}
</style>
 </head>
  
 <body>
  <div id="" class="top vi">
    They are arguing that it should be legal for migrant 
    workers to be paid less than the legally-binding hourly 
    wage for Korean nationals.
  </div>
  <div id="" class="right vi">
    They are arguing that it should be legal for migrant 
    workers to be paid less than the legally-binding hourly 
    wage for Korean nationals.
  </div>
  <div id="" class="bottom vi">
    They are arguing that it should be legal for migrant 
    workers to be paid less than the legally-binding hourly 
    wage for Korean nationals.
  </div>
  <div id="" class="left vi">
    They are arguing that it should be legal for migrant 
    workers to be paid less than the legally-binding hourly 
    wage for Korean nationals.  
  </div>
  <div id="" class="margin-all vi">
    They are arguing that it should be legal for migrant 
    workers to be paid less than the legally-binding hourly 
    wage for Korean nationals.
  </div>
 </body>
</html>