CSS:关于"display:inline-block"的一个冷知识

inline-block的元素特点:

将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格

  <body>
    <div>hello</div>
    <div>world</div>
  </body>

      div:nth-of-type(1) {
        background-color: pink;
        width: 50%;
        display: inline-block;
      }
      div:nth-of-type(2) {
        background-color: lightblue;
        width: 50%;
        display: inline-block;
      }

照常理说,将两个div的宽度都设为浏览器的50%,设置完inline-block后,两个块理应在同一行显示,但是:

将width调整为49%:

这是因为在代码中的上下换行，会被解析为一个空格
当两个宽度都能容在一行中，自然没问题。当我们设置为 50% 后，这个空格就会将第二个元素撑到下一行！

将换行符删去:

  <body>
    <div>hello</div><div>world</div>
  </body>

posted @ 2022-05-04 10:57  Theshy-Riven  阅读(51)  评论(0)    收藏  举报