Как сделать встроенный "border: 1px solid # 72777d" - PullRequest
Новая
       5

Как сделать встроенный "border: 1px solid # 72777d"

0 голосов
/ 17 ноября 2018

Я использовал «border: 1px solid # f2f2f2», чтобы применить границу для блоков. Как показано в Image , так как я использовал 1px solid, граница одного блока перекрывается с границейдругой блок, поэтому я хочу использовать встроенную границу с помощью CSS.Любое решение?Заранее спасибо ^ _ ^. 

border: 1px solid #f2f2f2

1 Ответ

0 голосов
/ 17 ноября 2018

Используйте 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 свойствоПервое поле не превышает своего предела, и оно не будет перекрывать соседние элементы

См. желтое поле, оно также имеет такую ​​же высоту и ширину.Без размеров коробки он превышает его высоту и ширину.

...