Uso eficiente del margen y padding.

[MACvsWINDOWS]

Bueno, yo no sé cómo usar el padding ni el margin.. ponga donde lo ponga se me acaba desbordando algo de la página.. y no quiero estar usando tablas ni divs vacíos para que me cuadren los márgenes...

algún consejo de cómo usar los márgenes y padding?

Saludos

[braulito]

Te podríamos ayudar mejor si pones tu código.

[sanxuan]

Puede que un manual de CSS te sea más util. Intenta buscar el modelo de caja CSS.
En líneas generales, los márgenes sirven como separadores entre elementos. Son los responsables de la mayor parte de los descuadres. La razón es que al contrario que el padding se extienden más allá de los límites del objeto y en lugar de sumar su ancho al margen de otro elemento los márgenes se solapan. Cuando dos márgenes coinciden en un borde, por ejemplo el derecho de un elemento y el izquierdo del siguiente, el navegador establece el margen escogiendo el mayor de los dos.
El padding, que en ocasiones se llama relleno es un margen interior. Piensa en una hoja de papel. El padding es el margen que dejas entre los bordes y el texto que escribes. El margin sería la separación entre distintas hojas.
Cuando calculas el espacio necesario para mostrar un elemento debes tener en cuenta que el ancho que se indica con la propiedad width es el ancho del contenido, del texto dentro de la hoja, no de la hoja en sí. A este valor debes añadir el ancho del padding, el del borde y el del margen. Igual con la altura.

[leo_nqn]

Depende lo que quieras hacer...

pero, no es tan complicado.. te recomiendo que uses margenes auto... por las dudas..
y el padding es la distancia de un borde (de un div por ej) hasta el lugarn donde comienza la letra del texto....

[cristian_cena]

Iniciado por MACvsWINDOWS

ponga donde lo ponga se me acaba desbordando algo de la página..

Tal vez no estes teniendo en cuenta que el ancho total de la caja css es la sumatoria de: width + padding + margin + border

tip: outline no agrega ancho.

uso de margin o padding (su uso es igual):
margin-top: 25px;
padding-right:3em;
margin-bottom:10pt;
padding-left:5%;

shorthand (o forma corta de escribirlo):

margin:0 1px 2px 3px; esto es equivalente a:
margin-top:0;
margin-right:1px;
margin-botom:2px;
margin-left:3px;

o sea, va en sentido de las agujas del reloj, empezando por top y terminando por left.

para padding, border y outline tambien puedes usar la forma corta.

Espero esta info te sea de utilidad. de todos modos en este enlace lo vas a entender mejor.

Saludos.

[proyectoswebseo]

Una manera de como poder utilizar todas las propiedades CSS relacionadas con los elementos >margin> y <padding> para cualquier tipo de proyectos Web, es incluirlos en elementos de código padre que estén basados en una cascada de código basados en valores de porcentaje, principalmente.

Esto te ayudará a poder utilizar clases CSS para cualquier resolución y con diseños Web fluidos. Lo que te permite, evitar esas deficiencias que te producen los valores incluidos únicamente en pixeles.

---------------------------------------------------

[MACvsWINDOWS]

Hola, gracias a todos por la info, me ha sido de gran utilidad

[victormoro1900]

Disculpen amigos alguien me puede ayudar este ejemplo como quedaría el maquetado en codigo html5 css3 http://www.youtube.com/my_videos_edit?ns=1&feature=vm-privacy&video_id=C5NiBH30kNI
Mil gracias