CSS: margen-derecha y elemento padre

¿El margen-derecho no se calcula o no se tiene en cuenta en el siguiente ejemplo? ¿Qué sucede cuando alguien aumenta el margen derecho en .box ? no tiene efecto. ¿por qué?

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

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!

Tiene un margin: 50px statement de margin: 50px , que aplica márgenes en todos los lados, así como un width: 300px statement de width: 300px . Los valores están excesivamente restringidos, ya que no se puede esperar que una caja de 300 píxeles de ancho tenga solo márgenes horizontales de 50 píxeles en un bloque contenedor cuyo ancho sea mayor que 300 + 50 + 50 píxeles, lo que de hecho da como resultado lo especificado valor de margin-right que se ignora (en el modo de escritura LTR típico).

Aquí, el margen se está colapsando. Tiene un margen, pero no se puede ver. Para hacerlo visible, necesitamos agregar el overflow: hidden para recalcular y mostrar el margen.

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

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!

Si desea que el fondo de .box sea ​​visible, use padding lugar de margin :

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

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!