CSS margin / padding

DEVELOPE/CSS

CSS margin / padding

소찾나 2017. 10. 25. 22:08

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>
Colored by Color Scripter
cs

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

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 속성을 적용하는 것과 똑같습니다.

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