HTML/CSS

XHTML

CSS - Margin & Padding

WEBSP2012.02.07 00:30

조회 : 3,519

Margin & Padding
Margin박스와 박스 사이의 간격을 적용시 사용하는 속성입니다.
Padding박스 영역의 내부의 간격을 적용시 사용하는 속성입니다.
Margin 과 Padding 이 두가지는 적용 방식이 같습니다.
웹 문서 구성 요소에서 가장 흔히 사용되어지고 있으며,
Margin 과 Padding 없이 웹 문서를 디자인 하기엔 큰 어려움이 있을 것이라 생각됩니다.
 
Margin
 
 
 
위 그림의 A 박스와 B 박스의 사이 간격을 Margin 이라고 합니다.
  
     margin-right: 10px;
 
margin-top : 위쪽으로의 간격
margin-right : 오른쪽으로의 간격
margin-bottom : 아래쪽으로의 간격
margin-left : 왼쪽으로의 간격
 
Padding
 

위 그림의 빗금 부분의 간격을 Padding 이라고 합니다.
 
       padding-top: 10px; padding-left: 10px;
  
padding-top : 위쪽으로의 간격
padding-right : 오른쪽으로의 간격
padding-bottom : 아래쪽으로의 간격
padding-left : 왼쪽으로의 간격
 
TIP
Margin 과 Padding의 속성 적용시 top, right, bottom, left 의 순서를 꼭 기억 해두세요! ^^
속성의 내용을 전부 적게되면 길어진 CSS의 소스를 축약하여 작성 하실 수 있습니다.
 
    * top, right, bottom, left 모두 10px 적용하기 
 
         margin: 10px; 
 
    * top/bottom은 10px  , left/right는 15px 적용하기
 
         margin: 10px 15px;
 
    * top은 10px , left/right는 15px , bottom은 0 적용하기
 
         margin: 10px 15px 0;
 
    * top은 10px , left 10px, right는 0 , bottom은 0 적용하기
 
         margin: 10px 0 0 10px;
 
     이와 같이 한번에 정리하여 간편하게 사용 하실 수 있습니다. ^^
     물론 Padding 역시도 같은 방법으로 사용 하실 수 있으니 알아 두세요.

0개의 댓글이 있습니다.

select count(*) as cnt from g4_login where lo_ip = '3.238.184.78'

1194 : Table 'g4_login' is marked as crashed and should be repaired

error file : /bbs/board.php