padding adentro css ¬¬

Kase · 20 Julio 2011, 11:55 AM

no se si e vivido engañado, pero almenos yo aprendi, y sino recuerdo mal asi dicen mis libros que

el padding se mide asia dentro del div, y el margin asia afuera...
asi es facil ponerle a un div

width:100%
padding:100px

y dginificaria que el div abarca todo el ancho, y el contenido estaria a 100 px de los bordes del div, no?

pues resulta que ahora que utilizo esta tecnica, me añade el padding al exterior del div..
dejandome un width de 100% +200px que me arruina mis diseños

y el problema no seme presenta en ie, sino en chrom, y firefox.. y ...y.. en todo? wtf!!

e vivido engañado? hay forma de forzar el padding asia dentro?

ahora para conseguir el mismo efecto de pagind asia dentro tengo que usar 2 divs, y no uno, y eso es muuy molesto

editando ____________________________________________
ok... estoy realmente confundido.
me puedo adaptar a que el padding sea asia fuera... tal vez asi fue siempre y algun momento me confundi.. pero ahora no comprendo que pasa! D=

mi html es esto

Citar
<head>
<link type="text/css" href="base.css" rel="stylesheet" />

</head>
<body>
<div id='head'></div>
<div id='menu'></div>
<div id='head2'>{% block content_title %}{%endblock%}</div>

{% block content %}{%endblock%}

<div id='pie'></div>
</body>

y mi css esto

Citar
body{
word-wrap:break-word;
}
#head{
   width:100%;
   height:200px;
}
#menu{
   padding-top:20px;
   padding-bottom:20px;
   width:100%;
   background:#222;
}
#head2{
   width:100%;
   background-color:##add058;
   min-height:20px;
}

por que me deja espacios D=

#!drvy · 20 Julio 2011, 14:41 PM

Esto no tiene nada que ver con el padding.

Es la propiedad body. Los navegadores suelen dejar algo de espacio en los 4 lados. Para solucionarlo añades un margin:0px; al body y listo.

Código (css,3) [Seleccionar]

body{
    word-wrap:break-word; 
    margin:0px;
}
#head{
   width:100%;
   height:200px;
}
#menu{
   padding-top:20px;
   padding-bottom:20px;
   width:100%;   
   background:#222;
        }
#head2{
   width:100%;
   background-color:##add058;
   min-height:20px;
}

Saludos

Oblivionlight · 28 Julio 2011, 06:40 AM

es correcto, deja el código asi:

Código [Seleccionar]


body{
    margin:0;
    word-wrap:break-word;  
}
#head{
   width:100%;
   height:200px;
}
#menu{
   padding-top:20px;
   padding-bottom:20px;
   width:100%;   
   background:#222;
        }
#head2{
   width:100%;
   background-color:##add058;
   min-height:20px;
}

Test Foro de elhacker.net SMF 2.1

padding adentro css ¬¬

Kase

#!drvy

Oblivionlight