[CSS] Margine, Border, Padding

gbsjms·2021년 6월 22일
1

CSS

목록 보기
3/7
post-thumbnail

Box의 특징 세 가지. (밖의 공간을 가짐.)

Margine

  • 위, 아래 경계가 같다면 더 큰값의 margine 적용.(Collapsing margine)
  • margin : a, b, c, d;(상, 하, 좌, 우) 값을 줄 수 있음.
  • box 경계로 부터 바깥에 있는 공간 (border < margine)
  • inline 에는 좌우만 적용됨.

padding

  • box 경계 안쪽의 공간 (padding < border)

border

  • box 경계 선

웹 페이지 화면

margine 적용

padding 적용.

실제 작성 코드

margine 적용

<style>
      body {
        background-color: cornflowerblue;
        margin: 10px 20px 100px 100px;
      }
      #a {
        background-color: rgb(219, 129, 25);
        width: 200px;
        height: 200px;
      }
      #b {
        background-color: rgb(39, 59, 150);
        width: 150px;
        height: 150px;
      }
      #c {
        background-color: rgb(192, 25, 164);
        width: 100px;
        height: 100px;
      }
      #d {
        background-color: rgb(158, 129, 14);
        width: 50px;
        height: 50px;
      }
      #e {
        background-color: royalblue;
        width: 10px;
        height: 10px;
      }
    </style>
  </head>
  <body>
    <h1>This is website</h1>
    <div id="a">
      <div id="b">
        <div id="c">
          <div id="d">
            <div id="e"></div>
          </div>
        </div>
      </div>
    </div>
  </body>

padding 적용.

  div {
        padding: 10px;
      }
      //위 코드에 padding 10px 추가
      

새로 배운 것

id 값을 여러개 주어 각각의 속성을 넣을 수 있음.

  • {} 를 통해 전체 css 속성 부여 가능.

느낀점

padding 값을 변경했는데 박스 사이즈가 커진게 뭐지 이해 안간다.

profile
코뽀

0개의 댓글