Box Model

width , height

/* 너비가 300px 미만으로 줄어들지 않고 600px 초과하지 않는다. */
div {
  min-width: 300px;
  max-width: 600px;
}

/* 높이가 150px 미만으로 줄어들지 않고 300px 초과하지 않는다. */
div {
  min-height: 150px;
  max-height: 300px;
}

border

/* border: 굵기 스타일 색상 */
div {
  border: 1px solid black;
}

padding , margin

/* padding-top, padding-right, padding-bottom, padding-left */
/* margin-top, margin-right, margin-bottom, margin-left */
padding: 10px 5px 8px 15px;

/* top right/left bottom */
padding: 5px 10px 15px;

/* top/bottom right/left */
padding: 5px 10px;

/* all */
padding: 10px;

margin-collapsing

<div>
  <p>hello, world!</p>
</div>

p {
  margin-top: 10px;  /* 👉🏻 div 요소에 margin-top 적용되버림 */
}

box-sizing