如何使“边框：1px固体＃72777d”内联

Question

我使用“边框：1px实心＃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属性，第一个框不会超出其限制，并且不会与附近的元素重叠

请参见黄色框，它也具有相同的高度，宽度。如果没有盒子大小，它会超过其高度和宽度。