요소의 크기

inline이 아닌 요소는 width와 height로 크기를 조절할 수 있다.

단위

1. 부모의 길이에 상대적인 %
2. 뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh
3. 이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin

(텍스트가 한 줄일 경우) height과 line-height을 똑같이 맞춰주면 세로 방향에서 가운데로 정렬한 것과 같은 모습이 된다.
calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞는 길이로 조절할 수도 있다.

최대/최소 너비/높이 속성

max-width
max-height
min-width
min-height

설정함으로서
부모 요소의 div보다 더 커지지 않거나(max-width / max-height)
부모 요소가 설정된 자식요소의 min값 (min-width / min-height)보다 줄어들지 않는다.

margin과 padding 속성

<margin, padding의 값을 주는 형식>

1. (공통)
2. (세로 가로)
3. (위 오른쪽 아래 왼쪽)
4. (위 가로 아래)

블록 요소의 위, 아래 margin은 전후 블록 요소의 것과 상쇄 된다.

속성명에 붙여 따로 지정해주는.

<p>margin과 padding은 -top, -bottom, -left, -right을 속성명에 붙여 따로 지정해줄 수 있습니다.</p>
<p class="special">이를테면 이런 상황에서 유용하죠.</p>

p {
  background-color: lightblue;
  margin: 24px;
  padding: 24px;
}

p.special {
  /* margin-top: */
  /* margin-bottom: */
  /* margin-left: */
  /* margin-right: */

  /* padding-top */
  /* padding-bottom */
  /* padding-left */
  /* padding-right */
}

margin을 이용한 가운데 정렬

margin에서 auto 값은 너비가 지정된 블록 요소의 가로 방향에서 남은 공간을 채운다.
이 방법은 컨텐츠 섹션을 화면 가운데로 배치하는데 널리 사용되었다. ex)네이버

<주의> inline-block에서는 margin : 0 auto;가 먹지를 않는데 이러한 경우 부모 요소의 text-align을 center로 줘서 가운데 정렬을 할 수 있다.

먹지 않는 이유가 궁금하여 강사에게 질문하였다.

오늘날에는 이후 배울 flex 방식으로 많이 대체되었다.