CSS Relleno - Al parecer, me he perdido algo

StackOverflow https://stackoverflow.com/questions/708855

  •  22-08-2019
  •  | 
  •  

Pregunta

Digamos que tengo algunas marcas como esto: 

<html>
<head>
<style type="text/css">
    #container
    {
        margin: 0 auto;
        width: 900px;
        background: green;
    }
</style>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

Imagine "contenedor" se llena de cientos de unos de fines de prueba de relleno.

Ahora, lo que quiero hacer es hacer una zona de espacio en blanco entre los bordes de "contenedor" y su contenido en los lados de la mano izquierda y derecha. Así agrego: 

padding-left: 50px;
padding-right: 50px;

Ahora de lo que (pensamiento) que entendí, esto significaría que si una cabida de 100 por línea antes, sólo el 80 o así encajaría ahora. En otras palabras, "contenedor" seguiría siendo el mismo ancho pero crecen abajo .

Sin embargo, lo que estoy viendo es que el tamaño de "contenedor" es cada vez mayor en posición horizontal y no vertical.

¿Cómo puedo obtener "contenedor" para crecer verticalmente hacia abajo y mantenerse la misma anchura horizontal?

¿Fue útil?

Solución

Es necesario cambiar el ancho de 800px y luego añadir el relleno. El relleno es aditivo a la anchura. 

    W------W   - original width
   PW------WP  - original width plus padding either side
    PW----WP   - smaller width plus padding either side

Box modelo cortesía de Can Berk Güder

Otros consejos

Lo que Garry Dicho esto, si usted está usando Chrome o complemento Firebug para Firefox puede hacer clic derecho y "inspeccionar elemento" y ver una representación visual de cómo su elemenent es ser de tamaño, realmente ayuda en estas situaciones.

Los efectos de la adición de relleno o margen de un elemento dependen por completo en el navegador que está viendo en la página. El relleno y margen debe ser aditivos como dice Garry pero ese no es el caso con IE6 por lo que tendrá que hacer algunas investigación en torno a las diferencias de navegador y cómo puede acomodarlos en sus reglas de estilo.

A partir de lo que parece que estás haciendo lo que desea es un relleno para ser aplicado a toda la página. Se podría hacer eso por referencia directa a cuerpo en la CSS. por lo que tendrá - 

body
{
    padding:0 50 0 50;
}

También puede añadir un margen a cualquier cosa dentro de la div: 

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top