Come rimuovere la spaziatura verticale indesiderata tra i div

Question

Ho incontrato un po 'di intoppo mentre sviluppavo il frontend per un sito web. Sono competente con i CSS, ma non fantastico. Ad ogni modo, ho creato un jsFiddle here che illustra il mio problema.

In ogni pagina del mio sito Web, nella parte superiore della sezione del contenuto, ho un'immagine del banner. Desidero mettere un separatore a due colori che separa questo banner dal contenuto. (Come mostrato nel modello che mi ha dato il mio designer: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)

Mi piacerebbe farlo in puro CSS + HTML, senza dover semplicemente ritagliare un'immagine. Comunque, l'ho fatto usando il seguente codice:

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"> 
<div> 
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div> 
</div> 

(si prega di perdonare il CSS in linea, è solo a scopo dimostrativo. Inoltre, purtroppo, se metto il secondo div su una nuova riga e il rientro di esso, crea spazi bianchi)

il problema sono avendo è che c'è un grande divario tra il divisorio e l'immagine. Ho provato ad aggiungere margine: 0px e padding: 0px a tutti gli elementi rilevanti, e lo spazio bianco è ancora lì.

Qualcuno potrebbe aiutarmi, per favore?

Grazie, YM

Answer 1

Per me è un problema di allineamento verticale.Si può provare

.banner { 
    display: block; 
    width: 100%; 
} 
div { 
    height: 10px; 
    vertical-align: top; 
} 

In questo modo non c'è bisogno di usare margini negativi (che non sono male, solo pratica controversa).

Check it out here

Answer 2

è possibile rendere la posizione relativa e quindi impostare la parte superiore a qualcosa di meno. es:

position: relative; 
top:-10px; 
left:0px; 

Answer 3

questo è in realtà galleggiare problema

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg"> 
<div style=""> 
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div> 
</div> 

css

.banner { 
    width:100%; 
float:left; 
} 

http://jsfiddle.net/eLbUU/4/

Answer 4

Prima di tutto, mettere il marrone più scuro nel div marrone più chiaro. In questo modo, quando la finestra viene ridimensionata, non si compromette la percentuale di ridimensionamento e/o la spaziatura.

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div> 

E con lo spazio, è possibile utilizzare margini negativi o galleggianti come altri hanno menzionato.

.banner { 
    width:100%; 
    /* margin-bottom to the banner is negative which moves the div upward */ 
    margin-bottom: -10px; 
} 

fiddle here

Answer 5

visualizzazione Mettendo: block; per la classe immagine e float: sinistra; perché tutti gli altri elementi possono aiutare.

.banner { 
    width:100%; 
    display:block; 
    float:left; 
} 

http://jsfiddle.net/bjliu/eLbUU/7/ (Edit: Scusa Link errato)

Answer 6

utilizzando blocco di visualizzazione e galleggianti div, anche assicurandosi che l'IMG è di per sé blocco con troppopieno nascosto ero in grado di stringere le strisce al IMG visualizzazione : fiddle

.banner { 
    width:100%; 
    display: block; 
    overflow: hidden; 
} 
div div{ 
    float: left; 
}