Why is the margin not fitting into the div?

Question

My button margin isn't fitting into my div. Here's the relevant HTML and 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>

It has always worked for me before, but it doesn't work now. I also haven't changed anything, except by adding the class ccard around card.

Here's what it looks like for me.

You've got `.ccard` in your css but `class="card"` in your html. — pistevw, Jun 23 '21 at 13:33
Does this answer your question? [How to disable margin-collapsing?](https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) — CBroe, Jun 23 '21 at 13:34

score 2 · Answer 1 · answered Jun 23 '21 at 13:40

2

You need to add box-sizing: border-box; to all relevant elements in order to include borders and paddings (I suppose you mean those, since you don't have any margin on the button) in the given width, otherwise they are added to the width, which causes overflow if the width is 100%.

answered Jun 23 '21 at 13:40

Johannes

64,305
18
73
130

I meant margins on the p – cabbage dude Jun 23 '21 at 13:58
1

In this case @CBroe is correct about pointing you to margin-collapsing. If you add a 1px padding-bottom to the parent element (`.container`), the margin-bottom on the `p` tag will not collapse anymore. – Johannes Jun 23 '21 at 14:02
1

Thanks! This is what I needed, sorry about that – cabbage dude Jun 23 '21 at 14:06

Why is the margin not fitting into the div?

1 Answers1