CSS a, button, div, span 스타일 동일하게 맞추기

1 개요[ | ]

✔️ Chrome 119.0.6045.160에서 테스트하였습니다.

CSS a, button, div, span 스타일 표준화
CSS a, button, div, span 스타일 동일하게 맞추기

font-family: inherit;이 없으면, button만 폰트가 다르게 보인다.
vertical-align: middle;이 없으면, font-size에 따라 button만 1px 정도 아래로 내려가는 경우가 있다.

html

Copy

<style>
a, button, div, span {
  display: inline-block;
  vertical-align: middle;
  font-family: inherit;
  border: 0;
  line-height: 1.5;
  padding: 5px 10px;
  font-size: 16px;
  background: skyblue;
}
</style>

<a>hello</a>
<button>hello</button>
<div>hello</div>
<span>hello</span>

2 같이 보기[ | ]