为什么边距不适合div？

Question

我的按钮边距不适合我的 div。这是相关的 HTML 和 CSS。

.card {
  justify-content: flex-start;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
  margin: 8px;
}
.card {
  margin-bottom: 16px;
  padding: 0px 8px;
  float: left;
}
.button {
  border: none;
  padding: 8px;
  color: white;
  background-color: black;
  text-align: center;
  cursor: pointer;
  width: 100%;
}
.button:hover {
  background-color: #555;
}
.title {
  color: grey;
}
.container {
  padding: 0px 16px;
}
.card > img {
  width: 100%;
}

    <div class="ccard">
        <div class="card">
            <img src="https://pbs.twimg.com/profile_images/1115280588322295808/N1mHLfHy_400x400.png" alt="Jane">
            <div class="container">
                <h2>Jane Doe</h2>
                <p class="title">CEO & Founder</p>
                <p>Jane has had 9 years of experience in the tech industry and knows it like the back of her hand. She's very warm and welcoming towards new customers.</p>
                <p>janedoe@cabbagedude.com</p>
                <p>
                    <button class="button">Contact</button>
                </p>
            </div>
        </div>
    </div>

它以前一直对我有用，但现在不起作用。除了在卡片周围添加类 ccard 之外，我也没有更改任何内容。

这就是我的样子。

Answer 1

您需要将box-sizing: border-box; 添加到所有相关元素，以便在给定的include 边框和填充（我想您的意思是那些，因为按钮上没有任何边距） width，否则会添加到宽度上，如果宽度为100%会导致溢出。