Tengo un elemento con un 70% de ancho, y está flotando al lado de un elemento con 30% de ancho, pero cuando agrego 25px de relleno expande el elemento y rompe el formato, ¿hay alguna manera de hacerlo aumentar el contenidos distancia desde el borde en lugar de simplemente hacerlo más grande?¿Evita que el relleno haga que el elemento sea más grande?
Cuando se utiliza el modelo border-box, el relleno está incluido en el tamaño de la caja. Vea here para más detalles.
<!DOCTYPE html>
<html>
<head>
<title>padding example</title>
<style type="text/css">
.seventy {
display: block;
float: left;
width: 70%;
background-color: red;
}
.thirty {
display: block;
float: left;
width: 30%;
padding: 25px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: green;
}
</style>
</head>
<body>
<div class="seventy">Stuff</div>
<div class="thirty">More Stuff</div>
</body>
</html>
Aunque la corrección del soporte para el tamaño del cuadro es un poco incompleto. Considere tomar un pequeño porcentaje de uno de los anchos y agregarlo al relleno. Entonces tus 2 anchuras + relleno = 100%. La solución EDIT ~ Zeta Twos garantizará un espacio de 25px que sería una mejor solución. – sweetroll
@codelark ¿necesito -webkit y -moz? – DBS
Crearía otro elemento del mismo tipo (¿puedo suponer que es un div?) Dentro del elemento y establecería uno para que tenga un margen/margen de 25px.
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 las personas deberían tener en cuenta. No hay ataques de CSS incompletos, no hay navegadores potencialmente incompatibles, y sigue un patrón limpio de contenido de contenedor. Me alegra ver algo de KISS CSS (¿CISS?), Ya que es muy fácil sobre-diseñar. – Nol
Veamos algunos de sus códigos –