interruzioni di layout CSS senza bordo div

Question

Mi sono imbattuto più volte in questo problema. Non ho ancora idea di cosa causa questo.

Riprodurre:

1. Aprire http://jsbin.com/ibowed/1/edit
2. Nel pannello CSS trovare .l-search-index .top { @ linea 26
3. cambiamento border: 1px solid #ff0000;-border: 0;
4. Whaaat?

Browser: Chrome, ma penso che u può provare in qualsiasi altro ..

Si prega di avvisare!

Answer 1

questo è un caso molto poco intuitivo dei margini che crollano:

§ 8.3.1 del CSS Spec spiega come i margini vengono gestiti e in quali circostanze crollano. Le regole non sono troppo facili da capire (ha diversi casi particolari), ma cito le parti pertinenti della specifica per voi:

Nei CSS, i margini adiacenti di due o più caselle (che potrebbe o potrebbe non essere fratelli) può combinare per formare un unico margine. Margini che si combinano in questo modo si dice che collassano, e il margine combinato risultante viene chiamato un margine collassato.

Due margini sono adiacenti se e solo se: senza finestre di linea, senza gioco, senza imbottitura e nessun bordo separarli

^{(sottolineato da me)}

Così, non appena man mano che rimuovi il bordo, i margini verticali dei tuoi elementi collassano. Il tuo caso lo rende un po 'complicato dal momento che hai margini negativi.

Per risolvere questo problema, è possibile impostare la proprietà overflow o applicare un elemento all'elemento padding:1px.

Answer 2

Riguarda il modo in cui i margini si sovrappongono e il modo in cui determinate proprietà li costringono a essere contenuti. Se posizioni due div in una pagina, entrambi con margini di 100 px, la spaziatura tra quelle div sarà di 100 px. Non 200 px. Questo perché i margini possono sovrapporsi ad altri margini. È così che funzionano i margini. È una buona cosa.

Ma se si inserisce un div all'interno di un altro div, entrambi con margini, anche quei margini si sovrappongono. I margini dell'elemento figlio si sovrappongono a quelli del genitore.

Tuttavia, alcune proprietà - border, come hai scoperto, ma anche padding e overflow - costringono il genitore a contenere i margini del figlio invece di sovrapporlo.

Sono sicuro che qualcuno può dare una spiegazione più tecnica, ma è così che penso a cosa sta succedendo.

Ecco un caso di test semplificato: http://jsbin.com/ukodus/2/
Rimuovere il // prima di qualsiasi delle linee di CSS per vedere l'effetto.

---

"Questo comportamento è chiamato collasso margine. Solo all'inizio/margini inferiore crollerà, non sinistra/destra". - @cimmanon

Answer 3

Ecco la soluzione.

.l-search-index .top{border: 0; height: 70%; overflow: auto;} 

È necessario aggiungere un overflow.

Spero che questo aiuti.