Stop Margin From Extending Parent Div

Question

I have a parent and child div, and when I add margin to the child div, it expands the parent div. How can I stop this from happening. You can see it happen here because the scroll bars appear.

I had a look at this similar question but I it doesn't seem like that answer does anything.

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

.container {
  background-color: orange;
  height: 100%;
  width: 100%;
}

.child {
  background-color: green;
  height: 100%;
  width: 200px;
  margin: 10px;
}

<div class="container">
  <div class="child"></div>
</div>

I would like this to be the final output. With the Orange div being 100% height

Dude, check out my answer. It's the same like what you wanted. — Praveen Kumar Purushothaman, Jun 22 '18 at 13:29

Praveen Kumar Purushothaman · Answer 1 · 2018-06-22T13:31:07.537

1

When you want the margins to collapse on the child div, give overflow: hidden to the parent div.

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

.container {
  background-color: orange;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 10px;
}

.child {
  background-color: green;
  height: 100%;
  width: 200px;
}

<div class="container">
  <div class="child"></div>
</div>

Now there's no scrollbars. I have used padding on the parent instead of margin. Please don't use calc() - not a good idea.

edited Jun 22 '18 at 13:31

answered Jun 22 '18 at 13:24

Praveen Kumar Purushothaman

164,888
24
203
252

Sorry man, check my edit. I would like the green div to have a padding around it. But DON'T just add padding to the parent. I need the margin to do this (in my program this would make sense) – Frank Jun 22 '18 at 13:29
@Frank You have conflicting heights! You might need to redo it. I'll write a different one... Give me a few moments. – Praveen Kumar Purushothaman Jun 22 '18 at 13:29
2

@Frank `height:calc(100% - 20px)` – Temani Afif Jun 22 '18 at 13:30
@TemaniAfif No, that's a worst idea... `:(` – Praveen Kumar Purushothaman Jun 22 '18 at 13:30
@Frank Check my answer now... `:D` – Praveen Kumar Purushothaman Jun 22 '18 at 13:31
he said : **don't add padding** – Temani Afif Jun 22 '18 at 13:31
@PraveenKumar Thank you very much my man! :) – Frank Jun 22 '18 at 13:31
@Frank You are welcome! `:D` – Praveen Kumar Purushothaman Jun 22 '18 at 13:32
@TemaniAfif Grrr. yeah. – Praveen Kumar Purushothaman Jun 22 '18 at 13:32
Ah wait man, I said you should please not add padding to the parent. Check my comment up here – Frank Jun 22 '18 at 13:32
and am sure he's thanking you for the calc ;) – Temani Afif Jun 22 '18 at 13:32
@TemaniAfif Your answer is actually perfect haha. Sorry for ignoring you man! Add it as an official answer then I can mark it as the answer....thanks XD – Frank Jun 22 '18 at 13:34
@Frank `calc` can be okay, but might not work in some cases. So use with caution... `:)` – Praveen Kumar Purushothaman Jun 22 '18 at 13:37

Stop Margin From Extending Parent Div

1 Answers1