0
165
Vistas¿Hay alguna forma de lograr el ancho principal completo dentro de un div incluso si el padre tiene relleno?
Tengo un elemento de tarjeta aquí dentro de esta tarjeta, como puede ver, tengo 2 encabezados y un gráfico de vértice. Actualmente, el gráfico también se ve más pequeño debido al relleno que configuré en el div principal. Quiero hacer que este gráfico se vea como una imagen de fondo (pero no puedo configurarlo como fondo porque no es un SVG). ¡y vea la segunda imagen para entender lo que quiero lograr!
¡Quiero la salida como esta! actualmente logro esto haciendo que el gráfico esté en una posición absoluta y ajustando las propiedades inferior e izquierda poco a poco, ¿hay alguna forma más limpia de implementar esto?
2 Respuestas
Responde la pregunta0
Supongamos que el elemento principal tiene padding: 20px . En el elemento hijo puedes hacer:
.child{ width: calc(100% + 20px * 2); transform: translateX(calc(-1 * 20px)); }0
Puede usar un margen negativo para compensar el relleno
.parent { background: yellow; padding: 20px; width: 150px; height: 150px; margin: auto } .child { background: green; margin: 0 -20px; height: 100% } <div class="parent"> <div class="child"></div> </div>