span 태그에 아무 내용도 없을때 border적용하기

div 에서는 안에 내용이 없더라도 div 자체가 block 요소이기 때문에 border 가 적용 되지만

span은 inline 요소이기 때문에 적용되지 않는다.

<span class="letter"></span>

<style>
  .letter {
    font-size: 25px;
    border-bottom: 3px solid rgb(127, 147, 202);
    margin: 0 3px;
    color: #fff;
    width: 50px;
    height: 50px;
}
<style/>  

위의 내용을 출력해보면 아무런 효과도 적용되지 않다가, span 안에 내용을 직접 입력 해주어야만 효과가 적용된다

.letter {
    display: inline-block;
    font-size: 25px;
    border-bottom: 3px solid rgb(127, 147, 202);
    margin: 0 3px;
    color: #fff;
    width: 50px;
    height: 50px;
}

이럴때 block 요소나, inline-block 으로 효과를 적용시켜주면 span 안에 아무내용이 없더라도 효과가 적용된다.