Warum Css Grenze überlappend macht die Grenze sieht dicker aus?

Question

Hier ist mein Code .. http://jsfiddle.net/s08nypfd/62/

Grenze für inneren Block überlappen und sieht sehr dick .. gibt es eine Lösung. Firefox und Chrome sein Aussehen anders ..

html

<div class="main_block"> 
    <div class="block"></div> 
</div> 

css

.main_block{ 
    width:400px; 
    height:100px; 
    background:#888; 
    border:1px solid black; 
} 
.block{ 
    width:100px; 
    height:100px; 
    border:1px solid red; 
} 

Answer 1

Stellen Sie die margin-* Werte auf .block:

.block{ 
    width:100px; 
    height:100px; 
    border:1px solid red; 
    margin-left: -1px; 
    margin-top: -1px; 
} 

Updated Fiddle

Answer 2

Wenn Sie die innere Grenze zu Abdeckung die Grenze des Elements Eltern möchten, verwenden Sie diese Einstellungen:

.block{ 
    position: relative; 
    top: -1px; 
    left: -1px; 
    width:100px; 
    height:100px; 
    border:1px solid red; 
} 

Die Position ist standardmäßig innerhalb die Grenze des Elternteils. Die obigen Einstellungen verschieben es auf den Rand des Elternteils (ein Pixel nach oben und nach links) und decken es damit ab.

Hier ist ein Ausschnitt dieses enthält:

.main_block{ 
 
    width:400px; 
 
    height:100px; 
 
    background:#888; 
 
    border:1px solid black; 
 
} 
 
.block{ 
 
    position: relative; 
 
    top: -1px; 
 
    left: -1px; 
 
    width:100px; 
 
    height:100px; 
 
    border:1px solid red; 
 
}

<div class="main_block"> 
 
    <div class="block"></div> 
 
</div>

Answer 3

Sie brauchen um zu spielen box-sizing Attribut. Wenn Sie negative Ränder wie empfohlen einstellen, stürzt Desing nur ab, wenn Sie die Stärke der Grenze ändern.

Sie können auch einen kleinen Trick für main_block verwenden - border: none setzen und Inset Box-Schatten statt Rand setzen.

Sie müssen box-sizing für Block setzen (die in Chrom und FF gut funktionieren):

.main_block{ 
 
    width:400px; 
 
    height:100px; 
 
    background:#888; 
 
    border: none; 
 
    box-shadow: 0 0 0 1px black inset; 
 
} 
 
.block{ 
 
    width:100px; 
 
    height:100px; 
 
    border:1px solid red; 
 
    box-sizing: border-box; 
 
}

<div class="main_block"> 
 
    <div class="block"></div> 
 
</div>