我可以在不會受到填充/邊距影響的html元素周圍放置邊框嗎？

情況：我有一個圖像在右側有15px的填充，我需要在圖像周圍放置邊框或輪廓。問題在於邊框和輪廓都將放置在填充物的外邊緣，從而產生間隙。有沒有一種方法來添加邊框或輪廓，將忽略填充和擁抱圖像本身？我可以在不會受到填充/邊距影響的html元素周圍放置邊框嗎？

Example

HTML：

<div class=""> 
    <img class="" src="http://www.emoticonswallpapers.com/avatar/art/TV-Test-Card.jpg" alt=""> 
</div>

CSS：

div { 
    position: relative; 
    width: 50%; 
} 
img { 
    position: absolute; 
    width: 100%; 
    padding-right: 15px; 
    outline: 1px solid #000; 
}

來源

2014-06-06 user1457366

我不知道關於它的瀏覽器的兼容性，這些天（或者如果它是CSS3的甚至還在部分或：由以下代替padding-right: 15px被刪除了），但是一個潛在有趣的關鍵字是CSS屬性'box-sizing'。 – pinkgothic

['box-sizing：border-box']（https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing）[得到很好的支持]（http：//www.paulirish .com/2012/box-sizing-border-box-ftw /），並且確實會解決這類問題。 – steveax

@steveax，如果你認爲'box-sizing'解決了這個問題，請張貼你的答案，但首先檢查它是否真的有效。 –

這不，除非你正試圖削減div標籤。

<div class="outerawesomediv"> 
    <div class="innerawesomediv"> 
    <img class="" src="http://www.emoticonswallpapers.com/avatar/art/TV-Test-Card.jpg" alt=""> 
    </div> 
</div> 

.outerawesomediv 
{ 
position:relative; 
width:50%; 
} 
.innerawesomediv 
{ 
padding-right:15px; 
} 
img 
{ 
position:absolute; 
width:100%; 
outline:1px solid #000000; 
}

來源

2014-06-06 23:00:09 sanepete

嘗試它包裹：

HTML

<div class="some"> 
    <div class="other"> 
    <img class="image" src="http://www.emoticonswallpapers.com/avatar/art/TV-Test-Card.jpg" alt="" /> 
    </div> 
</div>

CSS

.some { 
    position: relative; 
    width: 50%; 
    background:#FEF; 
} 
img { 
    position: absolute; 
    width: 100%; 

    outline: 1px solid #000; 
} 
.other { 
    padding-right: 15px; 
}

這樣你就單獨控制兩個。

來源

2014-06-06 23:04:53

不，因爲當您使用border或outline時，這些行由CSS定義繪製爲，以便填充位於裏面。

所以你需要考慮用別的東西替換填充。有幾種可能的方法，其可行性取決於問題中未披露的背景。一種方法是使用定位，尤其是SENCE你無論如何使用它：

left: 0; right: 15px;

來源

2014-06-07 05:39:06

當然取決於哪個「箱子尺寸」模型處於活動狀態。 – steveax

我可以在不會受到填充/邊距影響的html元素周圍放置邊框嗎？

回答

相關問題