[CSS] css display: inline-block 예시

사용 전

        <p class="txt">
            <strong>hello!</strong>
        </p>

/*display: inline-block 예시*/
p strong{
    border: 1px solid blue;
    display: inline-block;
}
.txt{
    border: 1px solid rgb(189, 189, 158);
}

사용 후

미세한 차이가 보이는가?! display:inline-block 속성을 추가함으로서 인라인 요소와 블록 요소의 속성을 모두 사용할 수 있게 되었다.

인라인 요소: strong

블록 요소: p

사용하기 전에는 두 solid 선이 겹쳐서 인라인 요소 부분에서는 선 하나만 보였지만, 사용 후에는 두개의 선 모두 보인다.