nkcmr
Tengo un elemento con un 70% ancho, y está flotando al lado de otro elemento con 30% ancho. Sin embargo, cuando agrego 25px de relleno, el elemento se expande y rompe el formato.
¿Hay alguna forma de hacer que el relleno aumente la distancia del contenido desde el borde del elemento, en lugar de hacer que el elemento sea más grande?
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
float: left;
width: 30%;
background-color: lightgreen;
}
.padded {
padding: 25px; /* Forces box onto next line */
}<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
<br><br>
<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>
alondra
Cuando usas el border-box modelo, el acolchado está incluido en el tamaño de la caja. Ver aquí para detalles.
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
box-sizing: border-box;
padding: 25px;
float: left;
width: 30%;
background-color: lightgreen;
}<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>-
Aunque corrext, el soporte para el tamaño de la caja es un poco incompleto. Considere tomar un pequeño porcentaje de uno de los anchos y agregarlo al relleno. Entonces sus 2 anchos + relleno = 100%. EDITAR ~ La solución Zeta Twos garantizará una brecha de 25px, que sería una mejor solución.
– rollo dulce
3 de marzo de 2011 a las 5:22
Crearía otro elemento del mismo tipo (¿puedo suponer que es un div?) dentro del elemento y configuraría ese elemento para que tenga un relleno/margen de 25 px.
Por ejemplo:
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>
-
Esta es una solución súper inteligente que la gente debería tener más en cuenta. No hay trucos de css incompletos, no hay navegadores potencialmente no compatibles, y sigue un patrón de contenido de contenedor limpio. Me alegro de ver algo de KISS CSS (¿CISS?), ya que es muy fácil modificarlo en exceso.
– nol
13 de febrero de 2017 a las 22:04