CSS margin 예제와 활용

 

 

 

CSS margin

CSS의 margin은 요소의 외부 여백을 지정하는 속성입니다.

 

 

 

 

 

728x90

 

CSS margin

margin은 요소 주위에 공간을 만들어주어 요소들 간의 간격을 조절하거나 요소를 가운데 정렬하는 등의 다양한 레이아웃 조작에 사용됩니다.

 

margin 속성은 다음과 같이 사용할 수 있습니다:

margin-top: 요소의 위쪽 여백을 지정합니다.
margin-right: 요소의 오른쪽 여백을 지정합니다.
margin-bottom: 요소의 아래쪽 여백을 지정합니다.
margin-left: 요소의 왼쪽 여백을 지정합니다.

 

또한, margin 속성은 축약형으로 사용할 수도 있습니다. 예를 들어, margin: 10px 20px;는 위아래 여백을 10px, 좌우 여백을 20px로 지정하는 것을 의미합니다.

 

margin 값은 음수를 사용하여 요소를 겹칠 수도 있습니다. 이를 통해 요소들을 서로 겹치게 하거나, 요소를 이동시킬 수 있습니다.

또한, margin 속성은 상속되지 않습니다. 따라서 부모 요소의 margin 값은 자식 요소에게 영향을 주지 않습니다.

마지막으로, CSS의 box-sizing 속성을 이용하여 margin 값을 요소의 크기 계산에 포함시킬지 여부를 결정할 수 있습니다. box-sizing: border-box;를 적용하면 margin 값이 요소의 크기에 포함되어 전체 크기를 조절할 수 있습니다.

 

 

CSS margin 예제

1. 요소의 가운데 정렬

.container {
  width: 500px;
  height: 300px;
  margin: 0 auto;
}

 

위의 예제에서는 .container라는 클래스를 가진 요소를 가로로 가운데 정렬하고자 합니다. margin: 0 auto;는 좌우 여백을 0으로 설정하고, 자동으로 가운데 정렬해줍니다.

 

 

2. 요소 간의 간격 조절

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}

 

위의 예제에서는 .box라는 클래스를 가진 요소들 사이의 간격을 10px로 설정하고자 합니다. margin: 10px;는 상하좌우 모든 여백을 10px로 설정합니다.

 

3. 요소를 겹치게 만들기

.box {
  width: 200px;
  height: 200px;
  margin-top: -50px;
  margin-left: -50px;
}

 

위의 예제에서는 .box라는 클래스를 가진 요소를 상단으로 50px, 좌측으로 50px 이동시켜서 다른 요소 위에 겹쳐지도록 만들고자 합니다. 음수 값을 이용하여 margin 값을 설정할 수 있습니다.

 

4. 다양한 margin 값 조합

.box {
  width: 150px;
  height: 100px;
  margin: 10px 20px 15px 30px;
}

 

위의 예제에서는 .box라는 클래스를 가진 요소의 상단 여백을 10px, 우측 여백을 20px, 하단 여백을 15px, 좌측 여백을 30px로 설정하고자 합니다. margin: 10px 20px 15px 30px;는 시계 방향으로 상단, 우측, 하단, 좌측의 값을 의미합니다.

이렇게 CSS의 margin 속성을 다양하게 활용하여 요소들의 간격과 레이아웃을 조작할 수 있습니다.