Rimozione spazio in alto a sinistra ea destra del div

Sto iniziando a lavorare con css e ho problemi di base.Rimozione spazio in alto a sinistra ea destra del div

Ho un elemento div:

.top { 
 
    background-color: #3B5998; 
 
    margin-left: 0px; 
 
    margin-top: 0px 
 
}

<div class="top">...</div>

Il codice colore è entrata in vigore (buono).

Il problema che ho è che sembra esserci un po 'di spazio bianco a sinistra, in alto ea destra del div. Come faccio a liberarmi dello spazio bianco? Ad esempio, se dai un'occhiata alla pagina di Facebook, la parte superiore è completamente blu, non c'è spazio bianco in alto.

fonte

2011-07-08 Bruce

Anche se ci può essere una risposta specifica a questa domanda, si dovrebbe considerare di usare un [resettare foglio di stile] (http://meyerweb.com/eric/tools/css/reset/). –

è necessario reimpostare sia il imbottitura e margine predefinito attributi nel foglio di stile:

html, body { 
    margin: 0; 
    padding: 0; 
}

Come cita @ Jason McCreary, si dovrebbe anche cercare nell'utilizzo di un foglio di stile di ripristino. Quello a cui si collega, il reset CSS di Eric Meyer, è un ottimo punto di partenza.

Sembra inoltre che vi state perdendo un punto e virgola nel CSS, dovrebbe apparire come segue:

.top 
{ 
    background-color:#3B5998; 
    margin-left:0px; 
    margin-top:0px; 
}

fonte

2011-07-08 03:17:18

Era così! Molte grazie. – Bruce

Oh dio .. Ero impazzito per questo ... Ho finito 3 tutorial su CSS e nessuno di loro ha detto che il corpo stesso ha un margine/imbottitura :) Grazie mille! – hakermania

Ho avuto lo stesso problema all'avvio; ma se hai intenzione di creare siti web compatibili con più browser, ti consiglio di utilizzare un foglio di stile per ripristinare i CSS; essenzialmente ripristinano gli stili che il browser aggiunge agli elementi (che possono essere diversi per i diversi browser). Solo i miei 2 centesimi su questo genere di cose. un rapido google per ripristino css darà un certo numero di opzioni. –

C'è padding su <body> della pagina. È possibile risolvere questo modo:

body 
{ 
    padding: 0; 
}

fonte

2011-07-08 03:03:34 Marty

Grazie. Ho apportato la modifica, lo stesso problema. – Bruce

Prova * {margine: 0; padding: 0; } – Marty

Se avete bisogno di un po 'di imbottitura all'interno del div, si dovrebbe scegliere padding:

padding:top right bottom left;

esempio:

padding:5px; /* 5px padding at all sides)*/ 
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */ 
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */ 
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */

Allo stesso modo per controllare lo spazio al di fuori del div, è possibile utilizzare il margine.

Il margine utilizzerà esattamente la stessa formula.

fonte

2011-07-08 03:26:02 kheya

Hmm ... non l'ha mai usato. Ma buono a sapersi. grazie – kheya

ho usato questo e ha funzionato per me:

body { 
    background-position: 50% 50%; 
    margin:0px; 
    padding:0px !important; 
    height:100%; 
}

fonte

2013-04-24 20:48:04 Marcos

Dopo molto tempo ho trovato la soluzione giusta per me:

html, body { 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
}

Abbiamo bisogno di definire il troppo pieno in orizzontale.

fonte

2015-09-15 19:04:12 monteirobrena

Questo è male. Non puoi mai scorrere orizzontalmente! –

il problema che ho avuto ultimamente anche, ma anche se ho usato il padding: 0px ha anche aggiunto il! Important on body non lo ha risolto ... il vero problema era la sua posizione ... che si può fare usando lo sfondo -posizionamento: 50% 50%; o lasciandolo automaticamente scegliere la posizione centrale dello schermo .. che è margine: 0 auto; o margine: auto; questo lo ha risolto per me ... spero anche per te. ho capito che il margine era necessario dopo aver provato la risposta di @HAS grazie man ur awesome ... scusa per zombify il post

fonte

2016-02-07 08:57:59

Se altre risposte non funzionano, prova position:absolute; top: 0px; left: 0px; o display:flex.

fonte

2016-04-24 06:48:07 Noumenon

margin: 0px; rimuoverebbe tutti gli spazi attorno all'elemento.

padding: 0px; cancella l'area attorno al contenuto

si può provare:

html, body {margin: 0px; padding:0px;} 
body {margin: auto;}

con margin: auto; il browser calcola un margine.

È inoltre possibile utilizzare

* {margin: 0px; padding: 0px;}

questo rimuoverà tutti i margini e gli spazi predefiniti. Ma attenzione durante l'utilizzo:

position: absolute;

La proprietà 'posizione' può assumere 4 valori, statici, relativi, fissi e assoluti. Quindi puoi usare le proprietà superiore, inferiore, sinistra, destra per posizionare il tuo elemento. Questo dipende dal tuo layout. Questo link potrebbe essere utile https://www.w3schools.com/css/css_margin.asp

fonte

2017-08-01 12:44:26 Ananda

Si prega di includere una breve descrizione di come o perché questo funziona. – jpaugh

si prega di rimuovere il voto negativo se questo è stato utile – Ananda

Non ho superpoteri (e non ho fatto downvote), ma credo che la domanda sia molto meglio ora. – jpaugh

Ho avuto lo stesso problema. basta provare questo:

html, body { 
    margin-top:-13px; 
}

fonte

2017-09-12 16:06:42 mhk

Rimozione spazio in alto a sinistra ea destra del div

risposta

Problemi correlati