100％寬度延伸過去父元素

Question

我使用HTML和CSS來編寫一個類似卡片的按鈕。

由於某種原因，圖像下文字的width總是延伸超過父div的邊緣。

我可以進行調整以使其在桌面上查看時相對不明顯，但在移動設備上查看時會變得非常痛苦。

.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
} 
 
.card-title { 
 
    margin: 10px; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

有誰知道爲什麼card-title延伸過去的card邊緣，我該如何解決？

我認爲這是與分配給card-title類inline-block，但如果我不包括中，margin小號card-title和card-img崩潰。

Answer 1

你可以試試這個：

https://jsfiddle.net/nbLLgx5x/

.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 

 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 

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

 
.card-title { 
 
    padding: 10px; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">This is a very long card title</p> 
 
</div>

Answer 2

使用padding和border-box

.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
} 
 
.card-title { 
 
margin: 0; 
 
    padding: 10px 0; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

Answer 3

那是因爲你有margin應用時，你應該使用padding

（margin s爲外層空間，padding s爲用於內空間，所以你的.card-title是一個孩子和你想要一些空間，但不超過父母，padding救援）。

但是因爲您現在使用的是padding您需要box-sizing才能獲得width的計算結果。

您也可以在您的img中設置display:block以消除間隙。

一大篇關於box-sizing

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
    display:block 
 
} 
 
.card-title { 
 
    padding:5px 10px; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin:0; 
 
    border:1px solid red 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

Answer 4

這是所有因保證金：10px的已分配卡片標題。這將右邊

消耗父寬+ 10px的左邊和10px的100％，有大約卡片所有權的裝訂線空間及家長範圍內限制它，使用卡片標題， 和在所有元素上啓用box-sizing: border-box;屬性。（邊界框將允許填充，邊界被認爲是元素的寬度本身的一部分）

* { 
 
    box-sizing: border-box; 
 
} 
 
.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
} 
 
.card-title { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

Answer 5

你這裏的問題是width: 100%;組合和margin: 10px;

簡單地說，你的卡標題將你的卡的寬度，也將有從你的保證金（這裏是2 * 10額外的寬度= 20px），並且最終會比你的父元素（卡）更寬，因此你的文本將以卡片標題爲中心，但卡片標題本身將在這裏向右移動10px。

所以在這裏你應該使用填充而不是邊距。快速提醒這些2如何工作（信貸到John Boker's answer）：

保證金是在塊元素的外部，而填充是在裏面。

• 使用餘量從事物的塊分離外面
• 使用填充 從塊的邊緣移開的內容。

這裏是解釋得很好，從https://www.impressivewebs.com/width-100-percent-css/的圖像：