CSS 여백(margin)

여백은 정의된 테두리 밖에서 요소 주위에 공간을 만드는 데 사용된다.

CSS margin 속성

CSS margin 속성은 정의된 테두리 밖에서 요소 주위에 공간을 만드는 데 사용된다.

CSS를 사용하면 margin을 완전히 제어할 수 있다. 요소의 각 측면(위, 오른쪽, 아래 및 왼쪽)에 대한 여백을 설정하는 속성이 있습니다.

margin - 개별 측면

CSS는 요소의 각 변에 대한 여백을 지정하는 속성을 가지고 있다:

margin-top
margin-right
margin-bottom
margin-left

모든 margin 속성은 다음 값을 가질 수 있다:

auto - 브라우저가 마진을 계산한다
length - 여백을 px, pt, cm 등으로 지정한다.
% - 포함 요소 너비의 % 단위로 여백을 지정한다
inherit - 여백이 상위 요소에서 상속되어야 함을 지정한다

팁: 음수 값이 허용됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>개별 margin 속성 사용</h2>

<div>이 div 요소의 위쪽 여백은 100px, 오른쪽 여백은 150px, 아래쪽 여백은 100px, 왼쪽 여백은 80px입니다.</div>

</body>
</html>

위쪽 여백은 100px, 오른쪽 여백은 150px, 아래쪽 여백은 100px, 왼쪽 여백은 80px를 설정하였다.

margin을 설정한 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS margin 단축 속성

코드를 단축하기 위해 하나의 속성에 모든 여백 속성을 지정할 수 있다.

margin 속성은 다음과 같은 개별 여백 속성에 대한 단축 속성이다:

margin-top
margin-right
margin-bottom
margin-left

상기의 속성을 단축 속성 margin으로 아래와 같이 설정할 수 있다.

margin: 25px 50px 75px 100px

위쪽에 25px, 오른쪽에 50px, 아래쪽에 75px, 왼쪽에 100px 여백을 설정한다.

아래는 margin 단축 속성을 활용한 예제이다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin 단축 속성 - 4개의 값</h2>

<div>이 div 요소의 위쪽 여백은 25px이고 오른쪽 여백은 50px이며 아래쪽 여백은 75px이며 왼쪽 여백은 100px입니다.</div>

<hr>

</body>
</html>

위의 코드를 실행한 결과화면은 아래 그림과 같다.

margin 속성에 3개의 값을 설정하면 아래와 같다.

margin: 25px 50px 75px

위쪽에 25px, 오른쪽, 왼쪽에 50px, 아래쪽에 75px 여백을 설정한다.

아래 margin 단축 속성에 3개의 값을 설정한 예시이다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin 단축 속성 - 3개의 값</h2>

<div>이 div 요소의 위쪽 여백은 25px이고 오른쪽/왼쪽 여백은 50px이며 아래쪽 여백은 75px입니다.</div>

<hr>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS margin 단축속성에 2개의 값을 설정한 예시이다.

margin: 25px 50px;

위쪽, 아래쪽에 25px, 오른쪽, 왼쪽에 50px 여백을 설정한다. 아래는 예제이다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin 단축 속성 - 2개의 값</h2>

<div>이 div 요소의 위쪽/아래쪽 여백은 25px이고 오른쪽/왼쪽 여백은 50px입니다.</div>

<hr>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS margin 단축 속성에 1개의 값을 설정할 경우의 예제이다.

margin: 25px;

위쪽, 오른쪽, 아래쪽, 왼쪽에 25px 여백을 설정한다. 아래는 예제 코드이다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin 단축 속성 - 1개의 값</h2>

<div>이 div 요소의 위쪽/아래쪽/오른쪽/왼쪽 여백은 25px입니다.</div>

<hr>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS margin auto 값

margin 속성을 auto로 설정하여 요소를 컨테이너 내에서 수평으로 중앙에 배치할 수 있습니다.

그러면 요소가 지정된 너비를 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에 균등하게 분할된다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>margin: auto</h2>
<p>margin 속성을 auto으로 설정하여 요소를 컨테이너 내에서 수평으로 중앙에 배치할 수 있습니다. 그러면 요소가 지정된 너비를 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에 균등하게 분할됩니다:</p>

<div>
이 div는 margin이 있기 때문에 수평으로 중심이 잡힙니다: auto;
</div>

</body>
</html>

margin을 auto로 설정한 결과 화면은 아래 그림과 같다.

CSS margin inherit 값

이 예에서는 <p class="ex1"> 요소의 왼쪽 여백을 상위 요소(<div>)에서 상속할 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>margin 속성 inherit value</h2>
<p>왼쪽 여백이 상위 요소에서 상속되도록 합니다:</p>

<div>
<p class="ex1">이 단락에는 (div 요소에서) 상속된 왼쪽 여백이 있습니다).</p>
</div>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS margin 속성에 대해 아래 표와 같이 정리하였다.

속성	설명
margin	하나의 선언에 모든 여백 속성을 설정하기 위한 단축 속성
margin-bottom	요소의 아래쪽 여백을 설정합니다
margin-left	요소의 왼쪽 여백을 설정합니다
margin-right	요소의 오른쪽 여백을 설정합니다
margin-top	요소의 위쪽 여백을 설정합니다

지금까지 margin 속성에 관하여 실습하고 정의를 살펴보았다.

꼭 실습하기를 바라며 모두 화이팅입니다.!!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 패딩(CSS padding) (0)	2023.07.20
CSS 여백 축소(CSS margin collapse) (0)	2023.07.19
CSS 둥근 테두리 (0)	2023.07.17
CSS 단축 테두리 속성 (0)	2023.07.16
CSS 테두리 측면 속성 설정 (0)	2023.07.15

enjoyCoding

CSS 여백(margin)

CSS margin 속성

margin - 개별 측면

CSS margin 단축 속성

CSS margin auto 값

CSS margin inherit 값

'HTML > CSS문법' 카테고리의 다른 글

댓글

티스토리툴바

CSS 여백(margin)

CSS margin 속성

margin - 개별 측면

CSS margin 단축 속성

CSS margin auto 값

CSS margin inherit 값

'HTML > CSS문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바