Foros del Web » Creando para Internet » CSS »

Uso eficiente del margen y padding.

Estas en el tema de Uso eficiente del margen y padding. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/02/2011, 16:29
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Uso eficiente del margen y padding.

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
  #2 (permalink)  
Antiguo 10/02/2011, 17:44
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Respuesta: Uso eficiente del margen y padding.

Te podríamos ayudar mejor si pones tu código.
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #3 (permalink)  
Antiguo 10/02/2011, 18:13
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Uso eficiente del margen y padding.

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.
  #4 (permalink)  
Antiguo 10/02/2011, 20:25
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Uso eficiente del margen y padding.

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....
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #5 (permalink)  
Antiguo 11/02/2011, 14:45
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Uso eficiente del margen y padding.

Cita:
Iniciado por MACvsWINDOWS Ver Mensaje
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.
  #6 (permalink)  
Antiguo 12/02/2011, 04:16
Usuario no validado
 
Fecha de Ingreso: octubre-2010
Ubicación: Santiago de Compostela
Mensajes: 9
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Uso eficiente del margen y padding.

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.

---------------------------------------------------
  #7 (permalink)  
Antiguo 12/02/2011, 08:46
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Uso eficiente del margen y padding.

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

  #8 (permalink)  
Antiguo 24/11/2012, 17:52
 
Fecha de Ingreso: noviembre-2012
Ubicación: mexico
Mensajes: 5
Antigüedad: 5 años
Puntos: 0
Respuesta: Uso eficiente del margen y padding.

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

Etiquetas: eficiente, margen, padding
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:57.