如何放大div的邊框而不是實際的寬度？

Question

我有一個內容的小孩div。 div有內部填充和一些邊距。現在我想讓它具有比實際寬度更多的邊框。我怎樣才能做到這一點？我的代碼：

<div class="parent"> 
    <div class="child"> 
    <p>Content</p> 
    </div> 
</div> 

.parent{ 
    border-top: 2px solid red; 
} 

.child{ 
    margin-left: 10px; 
    padding: 10px 10px; 
    border-bottom: 2px solid #000; 
    width: 50%; 
} 

p{ 
    margin:0; 
} 

現狀：

但我需要的輸出：

需要注意的是，我不能改變的margin和padding。可能嗎？提前致謝。

Answer 1

更改margin-left物業解決問題：

.parent{ 
 
    border-top: 2px solid red; 
 
} 
 

 
.child{ 
 
    margin-left: 0; 
 
    padding: 10px 10px; 
 
    border-bottom: 2px solid #000; 
 
    width: 50%; 
 
} 
 

 
p{ 
 
    margin:0; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <p>Content</p> 
 
    </div> 
 
</div>

如果你不想改變margin和padding，您可以使用這樣after僞元素：

.parent{ 
 
    border-top: 2px solid red; 
 
} 
 

 
.child{ 
 
    position: relative; 
 
    margin-left: 10px; 
 
    padding: 10px 10px; 
 
    width: 50%; 
 
} 
 

 
.child::after{ 
 
    content:''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    background: #000; 
 
    bottom: -2px; 
 
    left: -10px; 
 
} 
 

 
p{ 
 
    margin:0; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <p>Content</p> 
 
    </div> 
 
</div>

Answer 2

，如果你不能改變margin或padding使用僞元素::after

.parent { 
 
    border-top: 2px solid red; 
 
} 
 

 
.child { 
 
    margin-left: 10px; 
 
    padding: 10px; 
 
    width: 50%; 
 
    position:relative 
 
} 
 

 
.child::after { 
 
    content: ""; 
 
    left: -10px; 
 
    height:2px; 
 
    width:100%; 
 
    background: #000; 
 
    position: absolute; 
 
    bottom:0 
 
} 
 

 
p { 
 
    margin: 0; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <p>Content</p> 
 
    </div> 
 
</div>

Answer 3

您遇到這個問題是當你面對understand the box model。 border適用於padding而不適用於margin。一旦你理解了，應該很容易理解。

Answer 4

試試這個CSS：

.parent{ 
    border-top: 2px solid red; 
} 

.child{ 
     margin-left: 10px; 
    padding: 10px 10px; 
    width: 50%; 
    position: relative; 
} 
.child:after { 
    content: ""; 
    width: 100%; 
    border-bottom: 2px solid #000; 
    position: absolute; 
    bottom: 0; 
    left: -10px; 
} 
p{ 
    margin:0; 
}