Tengo un editor de texto donde hay una herramienta de imagen que tiene una función de inserción que agrega margen a la izquierda y a la derecha, pero solo funciona el margen izquierdo si desea sacar la imagen fuera del contenedor principal, pero el margen derecho simplemente se detiene en el borde del envase
.draft-bg { padding-top: 10px; padding-bottom: 1px; } .image-parent-container { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; position: relative; margin: 0rem; } .image-parent { width: 778px; height: auto; margin-top: 0px; margin-bottom: 0px; } img { width: 100%; height: auto; margin-right: 1000px; margin-left: 0px; } <div class="draft-bg"> <div class="image-parent-container"> <div class="image-parent"> <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" /> </div> </div> </div>De la especificación :
se dice que los valores están "sobre-restringidos" y uno de los valores usados tendrá que ser diferente de su valor calculado. Si la propiedad 'dirección' del bloque contenedor tiene el valor 'ltr', el valor especificado de 'margin-right' se ignora y el valor se calcula para que la igualdad sea verdadera. Si el valor de 'dirección' es 'rtl', esto sucede con 'margin-left' en su lugar.
Entonces, en su caso, el gran margen derecho está creando la parte "sobre-restringida" para que se ignore. También puedes ver que depende de la dirección.
Si cambia la dirección a rtl , esto no sucederá y su elemento saldrá del contenedor principal:
.draft-bg { padding-top: 10px; padding-bottom: 1px; } .image-parent-container { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; position: relative; margin: 0rem; } .image-parent { width: 778px; height: auto; margin-top: 0px; margin-bottom: 0px; direction:rtl; } img { width: 100%; height: auto; margin-right: 1000px; margin-left: 0px; } <div class="draft-bg"> <div class="image-parent-container"> <div class="image-parent"> <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" /> </div> </div> </div>