CSS: margin-right and parent element

Question

Is margin-right not calculated or taken into account in the following example? what happens when someone increases margin-right on .box? it has no effect. why?

.outer {
  width: 500px;
  margin: 0 auto;
  background: #9CF;
}
.box {
  width: 300px;
  background-color: #ffd900;
  margin: 50px;
}
p {
  background: #EEA458;
}

<div class="outer">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
      incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
  </div>
</div>

It is being changed so I don't understand the issue unless you are only following the width of the `
` element. — Rob, Dec 11 '16 at 19:55

score 3 · Answer 1 · answered Dec 11 '16 at 19:57

3

You have a margin: 50px declaration, which applies margins on all sides, as well as a width: 300px declaration. The values are over-constrained — since you can't expect a 300-pixel wide box to only have 50-pixel horizontal margins in a containing block whose width is greater than 300 + 50 + 50 pixels — which does indeed result in the specified value of margin-right being ignored (in the typical LTR writing mode).

answered Dec 11 '16 at 19:57

BoltClock

700,868
160
1,392
1,356

I think, I have problems with containing block and content block. Do you know any easy to follow tut? – Meysam Dec 11 '16 at 20:03
It is ignored but `getComputedStyle(box).marginRight` still says `50px` – Oriol Dec 11 '16 at 20:17
@Oriol: That's why the spec says "one of the used values will have to be different from its computed value". – BoltClock Dec 11 '16 at 20:19
@Oriol: ... I just remembered that getComputedStyle usually returns something close to the used value. Well, all I can say then is that's getComputedStyle for you. – BoltClock Dec 11 '16 at 20:20
@BoltClock `getComputedStyle` returns the resolved value, which in this case should be the used value. It's weird. – Oriol Dec 11 '16 at 20:28

score 1 · Answer 2 · answered Dec 11 '16 at 19:54

Here, the margin is getting collapsed. It does have a margin, but you cannot see. To make it visible, we need ti add the overflow: hidden to recalculate and show up the margin.

.outer {
  width: 500px;
  margin: 0 auto;
  background: #9CF;
  overflow: hidden;
}
.box {
  width: 300px;
  background-color: #ffd900;
  margin: 50px;
}
p {
  background: #EEA458;
}

<div class="outer">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
      incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
  </div>
</div>

After applying overflow: hidden to the parent, you could see the top and bottom margins too.

And since your margin-right: 50px; is lesser than 150px of the space on the right, you cannot see the right margins.

This is the current box model of the .box:

score 0 · Answer 3 · answered Dec 11 '16 at 20:16

0

If you want the background of .box to be visible, use padding instead of margin:

.outer {
  width: 500px;
  margin: 0 auto;
  background: #9CF;
}

.box {
  width: 300px;
  background-color: #ffd900;
  padding: 50px;
}

p {
  background: #EEA458;
}

<div class="outer">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
      incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
  </div>
</div>

answered Dec 11 '16 at 20:16

Rounin

27,134
9
83
108

1

Dude, my question is about margin-right being ignored! – Meysam Dec 11 '16 at 20:20
Yes, acknowledged - but I was trying to work out what you might mean by that. If you have given the parent container an explicit width, you can then give the child container any sort of right-hand margin, but it's not going to be apparent in any meaningful way when you refer to the visible (explicitly-stated) width of the parent container. – Rounin Dec 11 '16 at 20:27

CSS: margin-right and parent element

3 Answers3

Linked

Related