Sono nuovo nello sviluppo web e ho riscontrato un problema durante la rimozione del margine del corpo.Rimozione del margine del corpo nei CSS
C'è spazio tra la parte superiore del browser e il testo "logo". E il mio codice è here on jsbin.
body { margin: 0;} è errato se desidero rimuovere lo spazio?
direi che utilizza:
* {
margin: 0;
padding: 0;
}
è un brutto modo di risolvere questo.
Il motivo per il margine h1 che emerge dal genitore è che il genitore non ha un riempimento.
Se si aggiunge un padding all'elemento padre di h1, il margine sarà all'interno del genitore.
Il ripristino di tutti gli paddings e margini su 0 può causare molti effetti collaterali. Quindi è meglio rimuovere margin-top per questo titolo specifico.
Che tipo di effetti collaterali? L'unica cosa che so è che potrebbe essere meglio per il ripristino delle prestazioni in questo modo: body, div, p, a, img, h1, h2 .... {padding: 0; margin: 0;} – davedadizzel
Devi fare più lavoro per riapplicare i margini e/o riempire gli elementi in cui desideri (Hai il controllo totale, ma devi fare più lavoro). Certamente, tutto questo è preferenze dal codice della persona, ma per me mi piace "normalize.css" meglio di "reset.css". – andeersg
Sì. Ho sentito parlare di questo prima. Forse provare a utilizzare la normalizzazione è più mirato alla reimpostazione del margine/padding. Grazie! – chenghuayang
Hai ancora un margine sul tuo tag h1
quindi è necessario rimuovere quella in questo modo:
h1 {
margin-top:0;
}
Il problema è con il margine h1 intestazione. Hai bisogno di provare questo:
h1 {
margin-top:0;
}
Questo dovrebbe aiutare a sbarazzarsi di margini di corpo e di default margine superiore <h1> tag
body{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
vi consiglio di ripristinare tutti gli elementi HTML prima di scrivere il vostro CSS con : *{ margin: 0; padding: 0; }
Dopodiché, puoi scrivere il tuo css personalizzato, senza problemi.
È possibile utilizzare il corpo o * per fare margine e riempimento di 0px;
*{
margin: 0px;
padding:0px;
}
La risposta corretta per questa domanda è "ripristino css".
* {
margin: 0;
padding: 0;
}
Rimuove tutto il margine predefinito e il riempimento per ogni oggetto sulla pagina, senza esclusione di colpi, indipendentemente dal browser.
Alcuni elementi HTML hanno margini predefiniti (cioè: body, h1 a h6, p, fieldset, form, ul, ol, dl, dir, menu, e dd).
Nel tuo caso è il h1 che causa il tuo problema. Ha { margin: .67em } per impostazione predefinita. Se lo imposti a 0 rimuoverà lo spazio.
Per risolvere problemi come questi in generale, si consiglia di utilizzare dev tools del browser. Per la maggior parte dei browser: fai clic con il tasto destro sull'elemento di cui vuoi saperne di più e seleziona "Ispeziona elemento". Nella scheda "Stili", nella parte inferiore, hai un modello di box CSS. Questo è un ottimo strumento per la visualizzazione di bordi, padding e margini e quali elementi sono la radice del tuo mal di testa stile.
Ho riscontrato che questo problema è continuato anche quando si imposta il MARGINE CORPO su zero.
Tuttavia risulta che esiste una soluzione semplice. Tutto quello che devi fare è dare al tuo tag HEADER un bordo di 1px, così come settare il BODY MARGIN a zero, come mostrato sotto.
body { margin:0px; }
header { border:1px black solid; }
potrebbe anche essere necessario per modificare il margine a zero per qualsiasi H1, H2, ecc elementi che avete all'interno del vostro div intestazione. Questo eliminerà ogni spazio in più che potrebbe mostrare intorno al testo.
Non sono sicuro del motivo per cui funziona, ma utilizzo il browser Chrome. Ovviamente puoi anche cambiare il colore del bordo in modo che corrisponda al colore dell'intestazione.
è sufficiente rimuovere la Browser di default
MarginePaddingApplicare superiore del vostro Css.
<style>
* {
margin: 0;
padding: 0;
}
</style>
NOTA:
html elements prima di scrivere il CSS.O [Use This In Your Case]
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style>
DEMO:
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style><html>
<head>
</head>
<body>
<h1>logo</h1>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing –