Autor Tema: margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D (Leído 5282 veces)

Pitu · « **en:** 05 de Julio 2015, 21:40 »

Hola!!! Qué dificil se me hace esta propiedad FLOAT

Me surgió otra duda más cuando comparé mi solución al ejercicio con la solución que propone wilfridocardena en este hilo: https://www.aprenderaprogramar.com/foros/index.php?topic=2583. Pego a continuación mi código:

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio CU01035D</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CU01035D.css">
</head>
<body>
<div>
<div id="div1" class="primero">Caja 1</div>
<div id="div2" class="primero">Caja 2</div>
<div id="div3" class="primero">Caja 3</div>
<div id="div4" class="primero">Caja 4</div>
<div id="div5" class="primero">Caja 5</div>
<div id="div6" class="primero">Caja 6</div>
<div id="div7" class="primero">Caja 7</div>
<div id="div8" class="primero">Caja 8</div>
</div>
<div>
<p class="Segundo">En psicología y las ciencias cognitivas, el sesgo de confirmación es una tendencia a investigar o interpretar la información de tal suerte que confirme nuestras preconcepciones, es decir nuestras creencias previas, provocando errores en la interpretación del mundo que nos rodea. Se suele hacer referencia también como "sesgo confirmatorio" y es uno de los sesgos cognitivos que provoca más errores en la inferencia inductiva realizada en el proceso de confirmación de las hipótesis a estudiar. Para compensar esta tendencia humana se ha elaborado el método científico con el objetivo de poder desaprobar las hipótesis que la confirman de una forma más objetiva.</p>
</div>
<div>
<div id="caja1" class="tercero">Caja 1</div>
<div id="caja2" class="tercero">Caja 2</div>
<div id="caja3" class="tercero">Caja 3</div>
</div>
<div class="Cuarto">Curso CSS aprenderaprogramar.com</div>
</body>
</html>

Código: [Seleccionar]

/*CSS para Ejercicio CU01035D */
.primero{width:50px; height:50px;margin-right:5px}
#div1{
background-color:yellow; float:left}
#div2{
background-color:green;float:left}
#div3{
background-color:blue;float:left}
#div4{
background-color:red;float:left}
#div5{
background-color:gray;float:left}
#div6{
background-color:pink;float:left}
#div7{
background-color:silver;float:left}
#div8{
background-color:purple;float:left}
.Segundo{clear:left; background-color:yellow;margin-bottom:20px; margin-top:20px; width:100%;}
.tercero {width:200px; height:50px; margin-right:5px;}
#caja1{background-color:silver; float:right;}
#caja2{background-color:pink; float:right;}
#caja3{background-color:purple; float:right;}
.Cuarto{background-color:#DEB887; width:100%; text-align:left; clear:both}

Y la consulta es: ¿por qué en el navegar se ven los saltos de línea (o espacios entre div y div) en la solución de el, y en el mío cada div queda pegado al posterior (sin espacios, me refiero hacia abajo)?

¿Se entiende mi pregunta?

Ogramar · « **Respuesta #1 en:** 12 de Julio 2015, 00:15 »

Hola pitu, en el código que muestras pasa lo siguiente: en el elemento con class = "Segundo" tratas de establecer un margin-top respecto a elementos flotantes, pero los elementos flotantes se encuentran fuera del flujo normal de la página, de ahí que el margin-top no funcione.

Para poder crear el espacio puedes usar esto:

Código: [Seleccionar]

...
<div style="clear:both;"></div>
<div>
<p class="Segundo">En psicología y las ciencias cognitivas, ...más objetiva.</p>
</div>
...

Ahora ya puedes aplicar el margin-top respecto a un elemento no flotante (el div donde se establece el clear) y ver una separación entre el texto y las cajas con los colores.

Salu2

Ogramar · « **Respuesta #2 en:** 12 de Julio 2015, 00:16 »

Ah, en el código de wilfrido el espacio se muestra porque el párrafo muestra el margin respecto al div envolvente que ya tiene el clear establecido:

Código: [Seleccionar]

#nueve {width:100%; margin-top:20px; margin-bottom:20px; background-color:yellow; clear:both; }
Salu2

Pitu · « **Respuesta #3 en:** 12 de Julio 2015, 01:21 »

Ah, entiendo.

Muchas gracias!!!

freddychpo · « **Respuesta #4 en:** 23 de Octubre 2015, 05:59 »

Ogramar quiero saber si estoy correcto en algo.

Revisando el codigo de wilfrido llegue a la conclusion de que el espacio entre el parrafo y el div se muestra no solo porque el div envolvente tiene el clear establecido, sino tambien por la propiedad margin-bottom:20px del selector id #ocho.

Código: [Seleccionar]

 #ocho {width:50px;height:50px; margin-right:5px; margin-bottom:20px; background-color:gray; float:left;}

#nueve {width:100%; margin-top:20px; margin-bottom:20px; background-color:yellow; clear:both;  }

Lo que hace que se vea el espacio entre el parrafo y el div es especificamente dos cosas:
- La propiedad margin-bottom:20px en el sel id #ocho
- El clear establecido en el div

¿Estoy en lo correcto?

Si estuviera en lo correcto, ¿No importa el margin-top:20px del sel #nueve?

Agredecere la respuesta.

Muchas gracias.

Ogramar · « **Respuesta #5 en:** 23 de Octubre 2015, 08:09 »

Hola, en la solución de wilfrido entre la serie de 8 cuadrados de colores y el párrafo hay una separación gracias al margin-bottom: 20px;

Entre el párrafo y las tres franjas de colores inferiores hay una separación gracias a que el párrafo introduce por defecto un espaciado entre el párrafo y el elemento inferior. Este margin no está declarado en el css, es algo que introduce el navegador por defecto cuando representa un elemento <p> ... </p>. Recordar que algunos elementos llevan aparejados estilos por defecto. Estos estilos por defecto pueden ser eliminados con "reglas de reseteado", es decir, reglas donde específicamente declaremos que anulamos ese estilo oculto. Por ejemplo si declaramos el estilo p {margin:0;} estamos anulando el estilo por defecto que introduce el espaciado de los elementos p.

La propiedad clear no introduce un espaciado entre elementos, simplemente rompe el flujo generando un nuevo bloque a continuación del flujo anterior.

El margin-top del sel #nueve básicamente no sirve para nada.

Lo mejor para comprobar qué afecta y qué no afecta es hacer pruebas, es decir, introduce o elimina reglas y vete comprobando los efectos e interpretando el por qué de los resultados que obtienes.

Salu2

freddychpo · « **Respuesta #6 en:** 24 de Octubre 2015, 04:12 »

Si, hare pruebas para ir entendiendo que afecta y que no afecta.

Gracias por la repuesta Ogrammar.

Saludos tambien

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D (Leído 5282 veces)

Pitu

margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D

Ogramar

Re:CU01035D

Ogramar

Re:CU01035D

Pitu

Re:CU01035D

freddychpo

Re:margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D

Ogramar

Re:margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D

freddychpo

Re:margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D

Preguntas y respuestas