100% width extends past parent element

Question

I'm using HTML and CSS to code a card-like button.

For some reason, the width of the text under the image always extends past the edge of the parent div.

I can adjust to make it relatively unnoticeable when viewing on desktop, but it becomes a real pain when it comes to viewing on mobile devices.

.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>

Does anyone know why card-title extends past the edge of card and how I can fix it?

I think it has something to do with the inline-block assigned to the card-title class, but if I don't include that, the margins of card-title and card-img collapse .

Most of the CSS frameworks have box-sizing set to `border-box` by default. Because this gives more control when your layouts are fluid and works with percentages. If you are starting a new project, I would recommend to set the box model as the first setting. — David Chelliah, Jun 25 '16 at 18:45

score 3 · Accepted Answer · answered Jun 25 '16 at 15:44

You can try this:

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>

I like your answer because I don't have to mess with `box-sizing` — Philadelphia Regional Weather, Jun 25 '16 at 15:54

David Chelliah · Answer 2 · 2016-06-25T15:49:49.213

It is all due to margin:10px that you have assigned for card-title. That will consume 100% of the parent width + 10px on left and 10px on the right

To have a gutter space around the card-title and constrain it within parent bounds, use padding:10px for card-title, and enable box-sizing: border-box; property on all elements. (border-box will allow the padding, borders to be considered as part of element width itself)

* {
   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>

score 1 · Answer 3 · answered Jun 25 '16 at 15:38

Use padding and 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>

dippas · Answer 4 · 2016-06-25T15:59:06.900

That's because you have margin applied when you should be using padding

(margins are for outer space, paddings are for inner space, so as your .card-title is a child and you want some space around it but no more than the parent, padding to the rescue).

But because you are now using padding you need box-sizing to get the width calculated right regarding box-model.

Also you might want to set display:block in your img to remove a gap.

A great article about 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>

score 1 · Answer 5 · edited May 23 '17 at 11:58

Your problem here is the combination of width: 100%; and margin: 10px;

To put it simply you card-title will take the width of your card and there will also be an additional width from your margin ( here 2*10 = 20px ) and that will finally be wider than your parent element (card) therefore your text will be centered in the card-title but the card-title itself will be moved to the right by 10px here.

So here you should use padding instead of margin. Quick reminder about how those 2 works ( Credit to John Boker's answer ):

Margin is on the outside of block elements while padding is on the inside.

Use margin to separate the block from things outside it
Use padding to move the contents away from the edges of the block.

Here is an images that explains it well from https://www.impressivewebs.com/width-100-percent-css/ :

100% width extends past parent element

5 Answers5