如何使 "border: 1px solid #72777d" 内联

Question

我使用 "border: 1px solid #f2f2f2" 为框应用边框如 Image 所示，当我使用 1px 实体时，一个框的边框与另一个框的边框重叠，所以我想使用 CSS 来使用内联边框。任何解决方案？提前致谢^_^。

border: 1px solid #f2f2f2

Answer 1

使用 box-sizing:border-box 这样元素就不会超过它的高度和宽度。

.box{
        box-sizing: border-box; 
        border: 1px solid #f2f2f2; 
        width:50px; 
        height:50px; 
        background:red; 
        float:left;
        }

.box1{ 
    background:green; 
    float:left;  
    width:50px; 
    margin-left:15px;
    height:50px;
   }
 
 .box2{ 
    background:yellow; 
    float:left;  
    width:50px; 
    margin-left:15px;
    border: 1px solid #f2f2f2; 
    height:50px;
   }
 
.overall{
      background:#353535;
      height:100vh;
      padding:50px;
 
}

<div class="overall">

<div class="box">
  </div>
  <div class="box1">
  </div>
 <div class="box2">
 </div>
  </div>

你可以 .box，.box2 和 .box3 具有相同的宽度和高度

通过使用 box-sizing 属性第一个框没有超过它的限制，它不会与附近的元素重叠

看到黄色框它也有相同的高度，宽度。没有 box-sizing 它超过了它的高度和宽度。

如何使 "border: 1px solid #72777d" 内联

How to make "border: 1px solid #72777d" inline

css

less