Warum erscheint Border bottom auch wenn es nicht angewendet wird?

Question

Ich habe ein Gitter mit 4 Blöcken mit den Floats gesetzt. Und auf den Grid-Elementen habe ich auf jeden Artikel und Rand rechts auf die ungerade Anzahl von Elementen angewendet.

Aber aus irgendeinem Grund gibt es eine Art Grenze an der Unterseite der ungeraden Blöcke.

Gründe für dieses Verhalten und alle Korrekturen für die gleichen?

Zusätzliche Anmerkung: Dieses Problem tritt nicht auf, wenn ich das Raster mit flexbox einstelle.

Codepen-Link: https://codepen.io/vikrantnegi007/full/NXKjOb/

.main-container6 { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.services-container { 
 
    float: left; 
 
    width: 50%; 
 
    position: relative; 
 
    border-top: 2px solid #fff; 
 
} 
 

 
.services-text-left { 
 
    text-align: left; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    color: #ffffff; 
 
    background: rgba(109, 109, 109, .75); 
 
    -webkit-transition: all .35s; 
 
    transition: all .35s; 
 
    z-index: 99; 
 
    width: 100%; 
 
} 
 

 
.services-container img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.services-text-in { 
 
    padding: 60px; 
 
} 
 

 
.services-container:nth-child(2n+1) { 
 
    border-right: 2px solid #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section class="main-container6"> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Weil Sie box-sizing: border-box verwenden ... Hinzufügen border-right wirkt sich auf die Breite des Bildes, was wiederum die Höhe betrifft.

Wenn Sie allen Elementen border-right hinzufügen, stimmen die Höhen und die divs überein.

demo on codepen

Answer 2

dieser Effekt tritt auf, weil die ungeraden conatainers d.h (2n + 1) Grenzen und sogar Behälter d.h (2n) hat keine Grenze, Sie padding statt diese lösen können. oder gibt Grenze zu jedem Behälter

.services-container { 
    border-right: 2px solid #fff; 
} 

Answer 3

Fügen Sie einfach diese CSS-Eigenschaften zu .Services-Container-Klasse,

.services-container {border-right: 2px solid transparent;}