'css margin'에 해당되는 글 1건

css기초 마진(Margin)과 패딩(padding)


마진(margin)과 패딩(padding)에 대해서 알아보도록 하겠다.
마진과 패딩은 콘텐츠를 배치하기 위해서 자주 사용된다.
CSS 마진과 패딩은 그림으로 보면 아래와 같이 표현할 수 있다.

자세한 내용은 각 부분에서 알아보도록 하겠다.


태그와 태그 사이의 여백 - margin

CSS 마진(margin)은 태그와 태그 사이의 여백, 현재 요소 주변의 여백 간격을 조절하기 위해서 사용한다.
마진(margin) 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있으며
margin 속성을 사용하면 네 가지 방향 모두(top → right → bottom → left)를 한 번에 지정할 수 있다.
속성값으로는 크기(px, em 등)나 백분율(%), auto 등의 값을 지정한다.


콘텐츠와 테두리 사이의 여백 - padding


CSS 패딩(padding)은 콘텐츠와 테두리 사이의 여백, 테두리 내부의 여백을 조절하기 위해서 사용한다.
패딩(padding) 속성에는 padding-top, padding-right, padding-bottom, padding-left가 있으며,
 네 가지 속성을 한 번에 지정하기 위해서는 padding 속성을 사용한다.
속성값은 크기(px, em 등), 백분율(%), auto 등을 지정할 수 있다.

예제
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        margin: 10px 0px;
        border: 1px solid #bcbcbc;
      }
      div.a {
        padding: 10px;
      }
      div.b {
        padding: 10px 20px;
      }
      div.c {
        padding: 10px 20px 30px;
      }
      div.d {
        padding: 10px 20px 30px 40px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <code>padding: 10px;</code>
    </div>
    <div class="b">
      <code>padding: 10px 20px;</code>
    </div>
    <div class="c">
      <code>padding: 10px 20px 30px;</code>
    </div>
    <div class="d">
      <code>padding: 10px 20px 30px 40px;</code>
    </div>
  </body>
</html>

위 코딩의 결과값은 아래와 같습니다.

 

 

 

'홈페이지제작 > CSS' 카테고리의 다른 글

CSS DIV 메뉴만들기  (0) 2018.03.16
[CSS 기초강좌] 아이디 선택자(ID Selector)  (0) 2018.03.08
[CSS 기초] 클래스 선택자  (0) 2018.03.06
[CSS 강좌] 아이디 선택자  (0) 2018.03.06
[CSS 강좌] CSS Margin 속성  (0) 2018.03.05
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,