박스 모델

Web/🧩 html + CSS

박스 모델

dalpaeng 2020. 11. 3. 21:46

박스 모델(box model)

모든 HTML 요소는 박스모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.

박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 내용(content)으로 구분합니다.

1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

사용 예

<html>
  <head>
    <style>
      div {
        background-color: rgb(29, 187, 226);
        color: white;
        width: 300px;

        padding: 50px;
        border: 20px solid rgb(39, 153, 161);
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <div>* Box Model *<br /><br /></div>
  </body>
</html>

저작자표시