行内块元素布局的时候出现的问题

如题，在盒子内使用行内块元素布局的时候，总是会存在几像素的偏差

<style>
    *{
      border: 0;
      padding: 0;
      margin: 0;
    }

    div{
      height: 100px;
      background-color: orange;
    }

    .son{
      width: 50%;
      height: 100%;
      background-color: skyblue;
      /*float: left;*/
      display: inline-block;
    }
  </style>
</head>
<body>
<div>
  <div class="son"></div>
  <div class="son"></div>
</div>
</body>

　　这里在显示的时候，总是不能放在一个盒子里面，即使设置了内外边距和边框，也不能放在一个盒子里面

　　经过测试发现，不仅仅是转化后的行内块元素，还有本身就是行内块的元素（img，input，td等），也会存在这个问题

　　这个问题现在我只能使用浮动来解决这个问题

 

posted @ 2020-10-15 22:01  coderLsq  阅读(114)  评论(0)    收藏  举报