Foros del Web » Creando para Internet » CSS »

pequeño problema. DIV SIN MARGENES TIENEN MARGEN

Estas en el tema de pequeño problema. DIV SIN MARGENES TIENEN MARGEN en el foro de CSS en Foros del Web. hola gente queria consultarles porque estos divs concervan un margen que ni firebug ni el inspector de chrome justifican y como eliminarlo. Desde ya muchas ...
  #1 (permalink)  
Antiguo 30/11/2010, 16:39
 
Fecha de Ingreso: septiembre-2008
Mensajes: 190
Antigüedad: 9 años, 3 meses
Puntos: 2
pequeño problema. DIV SIN MARGENES TIENEN MARGEN

hola gente queria consultarles porque estos divs concervan un margen que ni firebug ni el inspector de chrome justifican y como eliminarlo. Desde ya muchas gracias

SOLUCION: PARA QUE ESTO NO SUCEDA HAY QUE DEFINIR LA PROPIEDAD FLOAT CON VALORES RIGHT O LEFT.
Código CSS:
Ver original
  1. .mitad {float:right;}
  2. /* o si no*/
  3. .mitad {float:left;}

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.         <title>index</title>
  8.         <link type="text/css" rel="stylesheet" href="estilos.css" media="all">
  9.     </head>
  10.  
  11.     <body>
  12.         <div class="mitad"></div>
  13.         <div class="mitad"></div>
  14.         <div class="mitad"></div>
  15.         <div class="mitad"></div>
  16.     <body>
  17. </html>
Código CSS:
Ver original
  1. div {
  2.    padding: 0px; margin: 0px;
  3.   }
  4. .mitad  {
  5.   width: 100px;
  6.   height: 100px;
  7.   background-color: #00af00;
  8.   position: static;
  9.   background-color: #000;
  10.   display: inline-block;
  11.   }

Última edición por marcelomp3; 30/11/2010 a las 17:16
  #2 (permalink)  
Antiguo 01/12/2010, 07:07
 
Fecha de Ingreso: octubre-2010
Mensajes: 155
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: pequeño problema. DIV SIN MARGENES TIENEN MARGEN

Te hago una observacion con tus valores no es necesario colocar 0px, solo tienes que colocar 0;
__________________
..
  #3 (permalink)  
Antiguo 01/12/2010, 10:42
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: pequeño problema. DIV SIN MARGENES TIENEN MARGEN

Buenas,

este comportamiento se presenta cuando hay espacios en blanco o saltos de línea en el código html entre elementos en línea. El div aunque es un elemento en bloque se transforma al aplicar la propiedad display: inline-block y funciona como un elemento en línea por eso aparece el "margen fantasma". Si el código fuera:

Código HTML:
Ver original
  1. <div class="mitad"></div><div class="mitad"></div>

sin ningún espacio entre las etiquetas, los divs quedarían completamente pegados uno al lado del otro sin necesidad de definir propiedades css nuevas.

El motivo por el que al definir la propiedad float se arregla el problema es porque al flotar un elemento también se convierte en un elemento en bloque (y este problema sólo se presenta en elementos en línea), es decir cuando el valor declarado de la propiedad display es inline o inline-block entre otros, el valor computado pasa a ser block si el valor de la propiedad float es distinto de none. Esto puede comprobarse con firebug o similares

Etiquetas: margen
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 19:05.