CSS solves the misalignment problem of inline-block

No more nonsense, post code

HTML part

<div class="positionleft">I am on the left side of the position method, accounting for 30%</div>
        <div class="positionright">I am on the right side of the position method, accounting for 70%</div>

CSS part

 .positionleft {
           position: relative;
           display: inline-block;
           background-color: #8d8d8d;
           width: 30%;
           height: 20%;

       }
       .positionright {
           position: relative;
           display: inline-block;
           left: 0;
           background-color: #ff8888;
           width: 70%;
           height: 20%;
       }

Display Effect

It can be clearly seen that the two div blocks are misaligned. After consulting the information, it is found that this phenomenon occurs when there is a space between the two inline-blocks.

Modify the html code as follows

<div class="positionleft">I am on the left side of the position method, accounting for 30%</div> <div class="positionright">I am on the right side of the position method, accounting for 70%
</div>

Just delete the space between the two divs and see the effect.

Problem Solving

Please pay attention to this problem when using document formatting tools such as prettier

Summarize

This is the end of this article about how to solve the misalignment problem of inline-block with CSS. For more relevant CSS inline-block misalignment content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!