TIL(2022.05.13) - [CSS] vertical-align

vertical-align

• 블록 요소에 적용할 수 있는 속성이 아니다.
• inline 요소나 inline-block 요소, table-cell 요소에 적용할 수 있다.
• 셀 안에서 수직 정렬하는 속성이다.
• 인라인 요소 사이에 생기는 공간을 vertical-align을 이용해서 맞춰준다.

 <a href="#"><img src="./images/subimg01.png" alt=""></a>

main aside img {
  width: 100%;
  filter: saturate(30%) brightness(50%);
  transition: all .5s;
}

main aside a {
  display: block;
  margin-bottom: 10px;
  border: 5px solid transparent;
  transition: all 0.5s;
}

이미지 요소는 inline 요소이기 때문에 베이스라인에 맞추어 정렬되므로 블록처리 된 태그 사이에 descender 발생한 것이다. 디센더를 해결하기 위해서 vertical-align 속성을 적용해주면 된다.

• baseline(기본값) 값 외에 bottom, middle, top 등으로 값을 변경하면 된다.

main aside img {
  width: 100%;
  filter: saturate(30%) brightness(50%);
  transition: all .5s;
  vertical-align: middle;
}

main aside a {
  display: block;
  margin-bottom: 10px;
  border: 5px solid transparent;
  transition: all 0.5s;
}