Question

我使用HTML和CSS编写类似卡片的按钮。

出于某种原因，图片下方文字的width始终超出了父div的边缘。

我可以调整以使其在桌面上观看时相对不明显，但在移动设备上观看时会变得非常痛苦。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

有谁知道为什么card-title超出了card的边缘以及我如何解决它？

我认为这与分配给inline-block课程的card-title有关，但如果我不包括margin card-title card-img }和{{1}}崩溃。

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

这完全归功于保证金：你为卡片名称分配的10px。这将消耗100％父宽度+ 10px左侧和10px右侧

要在卡片标题周围留出一个装订线空间并将其约束在父级边界内，请使用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 3

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

那是因为您在使用margin

时应用了padding

（margin s用于外部空间，padding用于内部空间，因此您的.card-title是一个孩子，并且您希望它周围有一些空间，但不超过父级，padding救援）。

但由于您现在正在使用padding，因此您需要box-sizing才能获得有关width的{{1}}计算权利。

此外，您可能需要在box-model中设置display:block以消除差距。

关于box-sizing

的精彩文章

＆＃13;

img

＆＃13;

*,
*::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
}

＆＃13;

Answer 5

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

的组合

简单地说，你的卡片标题会占用你卡片的宽度，并且还会有你边距的额外宽度（这里2 * 10 = 20px），这最终会更宽因此，您的文本将以卡片标题为中心，但卡片标题本身将在此处向右移动10px。

所以在这里你应该使用填充而不是边距。快速提醒这些2如何工作（感谢John Boker's answer）：

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

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

以下是从https://www.impressivewebs.com/width-100-percent-css/解释得很好的图片：

100％宽度延伸超过父元素

5 个答案: