3. CSS 박스 모델: 마진, 패딩, 보더

CSS 박스 모델에는 네 가지 중요한 속성이 있습니다. 바로 마진, 패딩, 보더, 크기입니다. 각 속성에 대해 살펴보고, 이를 이용하여 박스 모델을 제어하는 방법을 알아봅시다.

 

 

1. margin 마진

마진은 박스 주변에 공백을 만듭니다. 이는 박스를 주변 요소와 구별하는 데 도움이 됩니다. 예를 들어, 아래와 같이 박스의 마진을 설정할 수 있습니다:

  .box {
    margin: 20px;
  }

 

 

 

 

2. padding 패딩

패딩은 박스 안에 공백을 만듭니다. 이는 박스 내용을 주변과 구분하는 데 도움이 됩니다. 예를 들어, 아래와 같이 박스의 패딩을 설정할 수 있습니다:

  .box {
    padding: 20px;
  }

 

 

 

 

3. border 보더

보더는 박스 주변에 선을 추가합니다. 이는 박스를 주변과 구분하는 데 도움이 됩니다. 예를 들어, 아래와 같이 박스의 보더를 설정할 수 있습니다:

  .box {
    border: 3px dashed black;
  }

 

 

 

 

4. 크기

크기는 박스의 너비와 높이를 조절합니다. 예를 들어, 아래와 같이 박스의 크기를 설정할 수 있습니다:

  .box {
    width: 200px;
    height: 200px;
  }

 

 

 

5. 박스 모델 제어

다양한 박스 모델 속성을 조합하여 다양한 디자인을 만들어보세요!

  .box {
    width: 100px; 
    height: 100px; 
    background-color: #f44336; 
    margin: 50px; 
    padding: 40px; 
    border: 5px solid blue;
  }