티스토리 뷰

DEVELOPE/CSS

CSS margin / padding

소찾나 2017. 10. 25. 22:08
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

CSS margin / padding

CSS margin / padding


CSS margin / padding



웹페이지 작성시 자주사용하는 CSS(스타일시트)중 <div>, <span>, <img>, <p> 등 

모든 태그는 네모난 박스 형태로 화면에 표시가 가능합니다.

1 박스 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
  <html>
  <head>
   <meta charset="utf-8">
   <title>CSS 박스테스트</title>
  <style type="text/css">
    
 #big_box {    width:300px; height:300px; padding: auto; 
 text-align:center; border:1px solid gray;
 }
 
 #box{ width:200px; height:200px; margin: 50px; 
 border:1px solid red; text-align:center; line-height:200px;  
 }
  
  </style>
  </head>
  <body>
  <div id="big_box">
    <div id="box">CSS 는 쉽다.</div>
  </div>
 
  </body>
</html>
cs


박스를 간단하게 만들어 보았다 .


CSS margin / padding




CSS margin / padding


2 MARGIN / PADDING


패딩(Padding)은 내부공백으로 내용과 테두리 사이의 공간을 말합니다.

그리고 마진(Margin)은 외부공백으로 하나의 태그와 다른 태그 사이의 공간을 말합니다.


마진(Margin)은 margin-top, margin-right, margin-bottom, margin-left 속성을 사용해서 상하좌우의 마진값을 따로 지정할 수 있고, 패딩 역시 padding-top, padding-right, padding-bottom, padding-left 속성을 사용해서 상하좌우의 패딩값을 따로 지정할 수 있습니다.


그리고 패딩과 마진은 간략하게 padding과 margin 속성을 사용해서 네 방향 모두를 한꺼번에 빠르게 지정할 수도 있습니다. padding과 margin 속성에 지정할 수 있는 값의 개수는 1개부터 4개까지 지정할 수 있습니다.

 

1) 값을 하나만 지정할 경우


padding: 15px;  top, right, bottom, left 모두 같은 값으로 지정할때만 가능 

네 방향 모두에 똑같이 15px의 패딩을 지정합니다.


2) 값을 두 개 지정할 경우


padding: 10px 5px;

앞의 값 10px은 위와 아래, 뒤의 5px은 오른쪽과 왼쪽에 적용되는 패딩을 지정합니다.

 

3) 값을 세 개 지정할 경우


padding: 5px 15px 10px;

첫 번째 값 5px은 위, 두 번째 값 15px은 오른쪽과 왼쪽, 그리고 마지막 10px은 아래에 적용되는 패딩을 지정합니다.

 

4) 값을 네 개 지정할 경우


padding: 5px 10px 15px 20px;

 

값이 적힌 순서대로 위부터 시작하여 시계방향으로 위, 오른쪽, 아래, 왼쪽의 패딩을 지정합니다.

margin 속성에 지정하는 값의 개수도 padding 속성을 적용하는 것과 똑같습니다.



이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^

'DEVELOPE > CSS' 카테고리의 다른 글

CSS 외부파일 불러오기  (0) 2017.10.27
CSS DIV 속성 position  (0) 2017.10.27
CSS 폰트(Font) 글꼴속성  (0) 2017.10.26
CSS hover 사용법  (0) 2017.10.26
모바일웹 이미지맵 CSS 설정  (0) 2017.01.31
공유하기 링크
댓글