디스플레이 : 인라인 블록 여분 여백 > 기술자료

• 목록

공백은 인라인 요소에 영향을줍니다 .

이것은 놀라운 일이 아닙니다.
우리는 span, strong 및 기타 인라인 요소로 매일 그것을 봅니다.
여분의 여백을 제거하려면 글꼴 크기를 0으로 설정하십시오.


[ 변경전 ]

<div style="text-align:center;">
    <div><img src="img/sub1_2new11.png" alt=""></div>
    <ul>
        <li style="width:333px;"><img src="img/sub1_2new21.png" alt=""></li>
        <li style="width:323px;>
            <iframe width="323" height="247" src="https://www.youtube.com/embed/1-Z7H23bAEM?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </li>
        <li style="width:444px;"><img src="img/sub1_2new23.png" alt=""></li>
    </ul>
    <div><img src="img/sub1_2new31.png" alt=""></div>
</div>


[ 변경후 ]

<div style="text-align:center; font-size:0">
    <div><img src="img/sub1_2new11.png" alt=""></div>
    <ul>
        <li style="width:333px;"><img src="img/sub1_2new21.png" alt=""></li>
        <li style="width:323px;">
            <iframe width="323" height="247" src="https://www.youtube.com/embed/1-Z7H23bAEM?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </li>
        <li style="width:444px;"><img src="img/sub1_2new23.png" alt=""></li>
    </ul>
    <div><img src="img/sub1_2new31.png" alt=""></div>
</div>


참고자료
https://code.i-harness.com/ko/q/1bfb06