채니의 개발일기

CSS- margin 본문

프론트엔트/HTML,CSS

CSS- margin

윤채니챈 2023. 7. 18. 23:41
728x90
반응형

CSS에서 margin은 요소 주위의 공간을 조절하는 속성입니다.

margin을 사용하여 요소의 상하좌우에 여백을 추가하거나 감소시킬 수 있습니다.

 

  • margin 속성의 기본값은 0입니다. 이는 요소 주위에 어떠한 여백도 적용하지 않음을 의미합니다.
  • auto 값은 브라우저가 자동으로 여백을 계산하여 요소를 가운데 정렬하는 데 사용될 수 있습니다. 이는 주로 블록 요소를 가운데로 정렬하는 데 유용합니다.
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 300px;
      height: 200px;
      margin-left: auto;
      margin-right: auto;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

-> margin-left와 margin-right를 auto로 준값

= magin: auto; 해도 같은값이나옴

 

margin의 단축속성

 

선택자 {
  margin: 상단 우측 하단 좌측;
}

 

1)

div {
  margin: 10px 20px 30px 40px;
}

-> 상단 여백을 10픽셀, 우측 여백을 20픽셀, 하단 여백을 30픽셀, 좌측 여백을 40픽셀로 지정

 

2)두개씩 작성할경우 -> 선택자{margin: (top,bottom), (right,left)}

div {
  margin: 0 20px;
}

 

3)세개씩개씩 작성할경우 -> 선택자{margin: top, (left,right), bottom }

div {
  margin: 0 20 10px;
}

**-를 사용한경우 margin이 겹쳐짐 

728x90
반응형

'프론트엔트 > HTML,CSS' 카테고리의 다른 글

CSS - 가상클래스 (first-child,last-child,nth-child,부정선택자)  (0) 2023.07.24
CSS - 가상클래스 (:hover, :active,:focus)  (0) 2023.07.19
HTML - 절대경로 상대경로  (0) 2023.07.18
css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자)  (0) 2023.07.16
CSS:너비(width, height), 인라인과블록요소  (0) 2023.07.16
'프론트엔트/HTML,CSS' Related Articles more