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/的图像：