/* 요소별 배경색상 */
span {
  background-color: pink;
}

div {
  background-color: yellow;
}

/* + 는 형제 선택자 */
div + div {
  background-color: lightgreen;
}

/* 인라인 상자 - 크기 지정 */
/* 인라인 상자에선 width값은 content의 길이에 따라 결정된다
   따라서 width, height는 조정이 불가능 */
span {
  width: 200px;
  inline-size: 200px;
  height: 200px;
  block-size: 200px;
}

/* 블록 상자 - 크기 설정 */
/* 박스모델 관련 속성 */
.likelion {
  width: 800px;
  inline-size: 800px;
  /* 단축된 표기법(short-hand property) */
  border: 10px solid currentColor;
  padding: 50px;
  /* margin: 0 auto; */
  /* auto 키워드는 정렬 효과를 사용할 수 있음 */
  margin-left: auto;
  margin-inline-start: auto;
}

/* Margin 속성 - 병합(collapsing) */

.techit {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-block: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-block: 20px;
}

/* display: flex가 될 시 margin 병합 현상이 일어나지 않음 
일반적인 block contents일때 margin 병합 현상이 일어남 */
/* section {
  border: 4px solid black;
  display: flex;
  flex-direction: column;
} */

/* margin 속성은 padding과 달리 음수 값을 가질 수 있다. */
.school {
  margin-top: -20px;
  margin-bottom: -20px;
  margin-block: -20px;
}

.negative {
  background-color: orange;
  margin-top: -10px;
  margin-bottom: -10px;
  margin-block: -10px;
}

section {
  border: 5px dotted currentColor;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-block: 50px;
}

/* inline 방향의 여백(margin) */
/* inline 방향으로는 병합이 되지 않는다 */
span {
  margin-left: 20px;
  margin-right: 20px;
  margin-inline: 20px;
}