#3.6 Paddings and IDs

병고라니 2020. 12. 6. 19:08

부모자식 사이에 일어나는 Margin Collapsing은 부모요소에 padding을 주면 해결된다.

<!DOCTYPE html>
<html lang="kr">
  <head>
    <title>title</title>
    <style>
      html {
        background-color: tomato;
      }
      body {
        margin: 20px;
        padding: 10px;
        background-color: cyan;
      }
      div {
        margin: 100px;
        height: 200px;
        width: 200px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

위와 같이 코드를 작성하면 Margin Collapsing이 해결된다.

id선택자

#id를 적으면 해당되는 id를 가지는 태그에 스타일이 적용됨

참고로 id는 태그별로 고유해야하며 절대 중복되면 안된다.

<!DOCTYPE html>
<html lang="kr">
  <head>
    <title>title</title>
    <style>
      html {
        background-color: tomato;
      }
      body {
        margin: 20px;
        padding: 10px;
        background-color: cyan;
      }
      div {
        padding: 10px;
        background-color: white;
      }

      #first {
        height: 125px;
        width: 125px;
        background-color: darkgreen;
      }

      #second {
        height: 100px;
        width: 100px;
        background-color: darkmagenta;
      }

      #third {
        height: 75px;
        width: 75px;
        background-color: floralwhite;
      }
    </style>
  </head>
  <body>
    <div id="first">
      <div id="second">
        <div id="third"></div>
      </div>
    </div>
  </body>
</html>