CODEWITHSUNDEEP
htmlcsswidth
Philadelphia Regional Weather
Philadelphia Regional Weather

Reputation: 129

100% width extends past parent element

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 .

Upvotes: 4

Views: 2860

Answers (5)

shrimpdrake
shrimpdrake

Reputation: 1576

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.

enter image description here

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

Upvotes: 1

dippas
dippas

Reputation: 60553

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>

Upvotes: 1

David Chelliah
David Chelliah

Reputation: 1349

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>

Upvotes: 2

Quack
Quack

Reputation: 361

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>

Upvotes: 3

Felix A J
Felix A J

Reputation: 6470

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>

Upvotes: 1

Related Questions