[생활코딩] box model

은돌1113 2022. 1. 29. 17:40

728x90

box model은 각각의 태그들이 웹페이지에 표현 될 때 그 태그의 부피감, 여백, 위치, 크기를 결정하는 것을 말합니다.

각각의 태그들은 태그 바깥쪽에 사각형의 박스와 같은 모양으로 둘러싸여 있다고 해서 박스라는 표현을 사용합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p,
      a {
        border: 10px solid red;
        padding: 20px;
        margin: 40px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero!
    </p>a
    안녕하세요 <a>오새봄</a>
  </body>
</html>

inline block에서는 width, height는 적용 되지 않는다(무시된다)

728x90