so woon!

[속성] margin 속성 본문

CSS/개념정리

[속성] margin 속성

xowoony 2022. 9. 7. 23:27

학습일 : 2022. 09. 07

margin 속성
요소의 외부 여백을 지정하기 위해 사용한다.
외부 여백은 요소의 본래 크기로 인정되지 않는다.
상/하 외부 여백은 display 속성 값이 inline인 것(가령 a, span 등)에 대해서는 효과를 가지지 않는다.
요소를 가운데 정렬하기 위해 margin 속성 값을 '0 auto'로 두지 않는다. (구시대 방식)

용법 (한 개)
  ... {
    margin: [?px|?rem|?%|...];
  }


 선택된 요소의 모든 방향에 대한 외부 여백을 지정한다.
  퍼센트(%)값은 해당 요소를 포함하는 부모 요소의 크기에 대한 백분율이다.

용법 (두 개)
  ... {
    margin: [상/하 : ?px|?rem|?%|...] [좌/우 : ?px|?rem|?%|...];
  }


  선택된 요소의 상/하 및 좌/우 외부 여백을 각각 지정한다.

용법 (네 개)
  ... {
    margin: [상 : ?px|?rem|?%|...] [우 : ?px|?rem|?%|...] [하 : ?px|?rem|?%|...] [좌 : ?px|?rem|?%|...];
  }


선택된 요소의 상, 우, 하, 좌 외부 여백을 각각 지정한다. (12시 부터 시계 방향으로 네 군데)

margin-top 속성
상부 외부 여백을 지정하기 위해 사용한다.

용법
  ... {
    margin-top: [?px|?rem|?%|...];
  }

margin-right 속성
우측 외부 여백을 지정하기 위해 사용한다.

용법
  ... {
    margin-right: [?px|?rem|?%|...];
  }

margin-bottom 속성
하부 외부 여백을 지정하기 위해 사용한다.

용법
  ... {
    margin-bottom: [?px|?rem|?%|...];
  }

margin-left 속성
좌측 외부 여백을 지정하기 위해 사용한다.

용법
  ... {
    margin-left: [?px|?rem|?%|...];
  }
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>margin 속성</title>
    <style>
        div {
            background-color: rgb(0,5,10);
            color: rgb(255,255,255);
            margin: 1rem;❤
        }
    </style>
</head>
<body>
    <div>짜장면</div><div>짬뽕</div><div>볶음밥</div><div>중화비빔밥</div><div>탕수육</div>
</body>
</html>

==============실행결과=============

저작자표시 비영리 변경금지 (새창열림)

'CSS > 개념정리' 카테고리의 다른 글

[속성] display 속성  (0) 2022.09.10
[속성] padding 속성  (0) 2022.09.09
[속성] cursor 속성  (0) 2022.09.07
[속성] color 속성  (0) 2022.09.07
[속성] background-image 외 속성들  (0) 2022.09.07
'CSS/개념정리' Related Articles more
Comments