可能只使用一個div在邊距內部填充？

我只是想知道如果有人知道一種方式來使用只有一個股利獲得內嵌的邊界效應？或者我必須使用兩個？這就是我的意思：可能只使用一個div在邊距內部填充？

我目前正在使用一個帶有邊框的div，包裹在帶有填充的div內。我必須在心理上跟蹤哪些in_wraps與哪些out_wraps結合。我想只是元素上的頁面，看起來像這樣的：

box example

，而不必使用兩個div和匹配起來。下面是我使用的CSS：

.out_wrap_blk{ 
    padding: 5px; 
    background: black; 
    float:left; 
    margin: 10px; 
} 

.out_wrap_gry{ 
    padding: 5px; 
    background: #323232; 
    float:left; 
    margin: 10px; 
} 

.in_wrap_grn{ 
    border: 1px solid #0CFF0E; 
    padding: 20px; 
} 

.in_wrap_blk{ 
    border: 1px solid black; 
    padding: 20px; 
}

是否有可能將這一數字減少到只有一個元素或者我必須堅持圍繞內部元件包裹外部的元素？

來源

2015-01-26 Digital Brent

試試這個

#bor-outline { 
    width:100px; 
    height:100px; 
    background:grey; 
    border: 5px solid #292929; 
    outline: 5px solid #e3e3e3; 
}

見demo

來源

2015-01-26 23:43:58

謝謝！我不知道css屬性甚至存在！ – 2015-01-27 06:48:17

您可以使用僞元素：

HTML：

<div id="w"></div>

CSS：

#w{ width:300px;height:300px; background: grey;position:relative; } 
#w:after{ 
    content:""; 
    position:absolute; 
    left:15px; 
    top:15px; 
    height:266px; 
    width:266px; 
    border: 2px solid black; 
}

JSFiddle

來源

2015-01-26 23:14:52 potashin

感謝，同時我想這個解決方案，它的工作，對方的回答有點簡單，不過感謝，這仍然是很好的瞭解。 – 2015-01-27 06:49:19

所有你需要的是CSS 輪廓偏移財產迷死：

這裏有一個JSFiddle sample。

CSS：

div { 
    background: #808080; 
    margin: 20px; 
    width: 200px; 
    padding: 20px; 
    height: 200px; 
    outline: 2px solid black; 
    outline-offset: -16px; 
}

來源

2016-11-04 08:30:20 ITWitch

可能只使用一個div在邊距內部填充？

回答

相關問題