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 class 的 inline-block 有关，但如果我不包括它，margin 的card-title 和 card-img 崩溃。

Answer 1

使用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 2

那是因为你在应该使用 padding

的时候应用了 margin

(margins 用于外部 space，paddings 用于内部 space，因此您的 .card-title 是 child 并且你想要一些 space 围绕它，但不超过 parent，padding 来救援）。

但是因为您现在正在使用 padding，所以您需要 box-sizing 来获得 width 关于 box-model 的正确计算。

您可能还想在 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 3

都是因为margin:10px你给card-title分配的。这将消耗 100% 的 parent 宽度 + 左侧 10px 和右侧 10px

要在 card-title 周围设置间距 space 并将其限制在 parent 范围内，请对 card-title 使用 padding:10px，并在所有元素上启用 box-sizing: border-box; 属性。（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 4

你可以试试这个：

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 5

你的问题是 width: 100%; 和 margin: 10px;

的组合

简而言之，您 card-title 将占据卡片的宽度，并且还会有 边距的额外宽度 （此处为 2*10 = 20px ) 最终会比 parent 元素（卡片）宽，因此您的文本将在 card-title 中居中，但 card-title 本身将在此处向右移动 10px。

所以这里你应该使用padding而不是margin。关于这 2 个如何工作的快速提醒（归功于 John Boker's answer）：

边距在块元素的外侧，而填充在内侧。

使用边距将块与其外部的东西分开
使用填充将内容从块的边缘移开。

这是一张来自 https://www.impressivewebs.com/width-100-percent-css/ 的图片，很好地解释了它：

100% 宽度超出父元素

100% width extends past parent element

html

css

width