¿Por qué se superponen mis márgenes div y cómo puedo solucionarlo?

Question 1

No entiendo por qué los márgenes de estos div se superponen.

.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}

<div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

Expandir fragmento

imagen

Question 2

Creo que es un margen colapsado. Solo se tiene en cuenta el margen más grande entre la parte inferior del primer elemento y la parte superior del segundo.

Es bastante normal no tener demasiado espacio entre dos párrafos, por ejemplo.

~~No puede evitar eso con dos elementos adyacentes, por lo que debe ampliar o reducir el margen más grande.~~

EDITAR: cf. W3C

Dos márgenes son contiguos si y solo si:

ambos pertenecen a cajas de nivel de bloque en flujo que participan en el mismo contexto de formato de bloque

sin recuadros de línea, sin espacio libre, sin relleno y sin borde los separan

ambos pertenecen a bordes de caja adyacentes verticalmente

Entonces no hay colapso floatque saque al elemento del flujo.

Question 3

Los márgenes, al contrario que el relleno (que rellena un ancho específico) es un "haz esto como una distancia mínima".

No pondrá esa distancia a todos los elementos.

Como puede ver, el margen inferior del bloque de ponerse en contacto está marcado con el cuadro de entrada. Ese es el margen activo aquí. El otro margen, el margen superior de la entrada, no está en efecto, ya que es más pequeño y no llega a un elemento de bloque donde realmente empujaría hacia atrás el elemento. Los 2 márgenes se superponen y no se afectan entre sí.

Question 4

Si no puede usar el relleno y realmente necesita que el margen no se superponga, aquí hay un truco:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

Ejecute este fragmento para la demostración:

Mostrar fragmento de código

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

Expandir fragmento

Question 5

Tenga cuidado display: flexcon el elemento padre.

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}

<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>

Expandir fragmento

Question 6

Agregue una etiqueta div clara entre los dos objetos

Answer 1

No entiendo por qué los márgenes de estos div se superponen.

.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}

<div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

Expandir fragmento

imagen

Answer 2

2

Puede encontrar interesante este artículo sobre contextos de formato: tjkdesign.com/articles/…

jensgram

Answer 3

1

Parece que le faltan algunas de las reglas que usa allí. ¿Todos los elementos dentro de .alignright también flotan?

Joel Glovier

Answer 4

80

Creo que es un margen colapsado. Solo se tiene en cuenta el margen más grande entre la parte inferior del primer elemento y la parte superior del segundo.

Es bastante normal no tener demasiado espacio entre dos párrafos, por ejemplo.

~~No puede evitar eso con dos elementos adyacentes, por lo que debe ampliar o reducir el margen más grande.~~

EDITAR: cf. W3C

Dos márgenes son contiguos si y solo si:

ambos pertenecen a cajas de nivel de bloque en flujo que participan en el mismo contexto de formato de bloque

sin recuadros de línea, sin espacio libre, sin relleno y sin borde los separan

ambos pertenecen a bordes de caja adyacentes verticalmente

Entonces no hay colapso floatque saque al elemento del flujo.

MatTheCat
fuente

Simplemente reduzca su margen a lo que desea que sea.

Kissaki

Editado, simplemente amplíe o reduzca un margen más grande o use relleno

MatTheCat

8

acabo de descubrir que si flotan los elementos, se aplican márgenes para ambos.

Atif Mohammed Ameenuddin

10

Sería cauteloso con su uso floatcomo truco, ya que puede tener algunos efectos secundarios desagradables. Soy cauteloso con el uso floatcomo regla.

Andrew

Si le da una altura a una hora, ¿se convierte en una caja de nivel de bloque de flujo? Pruébalo

Manuel Hernandez

Answer 5

Simplemente reduzca su margen a lo que desea que sea.

Kissaki

Answer 6

Editado, simplemente amplíe o reduzca un margen más grande o use relleno

MatTheCat

Answer 7

8

acabo de descubrir que si flotan los elementos, se aplican márgenes para ambos.

Atif Mohammed Ameenuddin

Answer 8

10

Sería cauteloso con su uso floatcomo truco, ya que puede tener algunos efectos secundarios desagradables. Soy cauteloso con el uso floatcomo regla.

Andrew

Answer 9

Si le da una altura a una hora, ¿se convierte en una caja de nivel de bloque de flujo? Pruébalo

Manuel Hernandez

Answer 10

Los márgenes, al contrario que el relleno (que rellena un ancho específico) es un "haz esto como una distancia mínima".

No pondrá esa distancia a todos los elementos.

Como puede ver, el margen inferior del bloque de ponerse en contacto está marcado con el cuadro de entrada. Ese es el margen activo aquí. El otro margen, el margen superior de la entrada, no está en efecto, ya que es más pequeño y no llega a un elemento de bloque donde realmente empujaría hacia atrás el elemento. Los 2 márgenes se superponen y no se afectan entre sí.

Answer 11

Si no puede usar el relleno y realmente necesita que el margen no se superponga, aquí hay un truco:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

Ejecute este fragmento para la demostración:

Mostrar fragmento de código

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

Expandir fragmento

Answer 12

Tenga cuidado display: flexcon el elemento padre.

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}

<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>

Expandir fragmento

Answer 13

-1

Agregue una etiqueta div clara entre los dos objetos

Richard Max
fuente

¿Por qué se superponen mis márgenes div y cómo puedo solucionarlo?

Respuestas: