Element h1 powoduje pojawienie się paska przewijania. Czy ktoś może mi wyjaśnić, dlaczego?css: margin-top powoduje scrollbar
html, body {
margin: 0;
padding: 0;
height: 100%;
}
header {
height:10%;
}
section {
height:90%;
}<header>
<h1>
Hello
</h1>
</header>
<section>
test
</section>to dlatego
h1 mieć jakiś margines pionowy domyślnie zazwyczaj 0.67em.h1 zapadaheight nie zawiera wysokość obszaru marginesuPonieważ górny margines h1 wali, to zachowuje się jak margines należał do header zamiast h1. Ponieważ wysokość zawartości h1 wynosi 10%, jej całkowita wysokość będzie wynosić calc(10% + 0.67em).
To dlatego występuje przepełnienie.
Jeśli usuniesz górny margines, ale pozostawisz dolny, nie ma problemu, ponieważ dolny nie zwija się, ze względu na nie-autoheight. Z Collapsing margins,
marginesami są przylegający jeżeli [...] zarówno należą do pionowo sąsiadującymi krawędzi skrzyni [... np]
- górny margines pudełka i górnego marginesu swojego pierwszego dziecka w przepływowym
- dolny margines ostatnim dzieckiem w przepływowym i dolnej marginesie jego rodzica, jeśli ma
autoobliczoną wysokość.
Więc można wykonać dowolną z następujących
h1 „s górny marginesbox-sizing: margin-box do Grupy Roboczej CSS. Prawdopodobnie zostanie odrzucony.Ponieważ h1 pochodzi z marginesu, stosowanej przez default style sheet.
Po dodaniu tego marginesu (często margin-top: .67em i margin-bottom: .67em) do kodu height: 100% przekracza to wysokość widoku i uruchamia pionowy pasek przewijania.
Podaj h1 a margin: 0.
Niezależnie od tego, czy używasz box-sizing: content-box czy border-box, przestrzeń marginesu zawsze będzie dodana do deklaracji height.
Jeśli chcesz dodać więcej miejsca wokół numeru h1 bez dodawania wysokości, użyj wypełnienia zamiast marginesu, wraz z box-sizing: border-box. Oto kilka opcji implementacji: https://css-tricks.com/box-sizing/
h1 domyślnie ma zastosowany margines.
Wiem, że h1 ma margines. Ale dlaczego powoduje pasek przewijania? nagłówek to 10%, a przekrój to 90% widoczności. h1 znajduje się w nagłówku. – Matthew
*
{
margin:0px auto;
}
html, body {
margin: 0 ;
padding: 0;
height: 100%;
}
header {
height:10%;
}
section {
height:90%;
}<header>
<h1>
Hello
</h1>
</header>
<section>
test
</section>Wystarczy dodać selektor uniwersalny i sprawiają, że margines *{margin:0px auto;}. Nadzieję, że to będzie działać
* {margin: 0; } jest poprawne. –
@AliMottaghiPour Dobrą praktyką jest użycie '* {margin: 0px auto',' auto' aby przeglądarka obliczyła marginesy – Sampad
aby zresetować css musisz użyć * {margin: 0; } –
Znacznik h1 w elemencie blokowym ma pewien margines.
Aby usunąć tego typu dodatkową marżę i obicia, zaleca się, aby zresetować wszystkie elementy marginesu i dopełnienie do 0.
Można to zrobić poprzez:
* {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header {
height:10%;
}
section {<header>
<h1>
Hello
</h1>
</header>
<section>
test
</section>
to jest właściwie najlepsza odpowiedź. Ale niektóre pytania: w jaki sposób może załamać się margines, jeśli mam tylko jeden element z marginesem? Po drugie, jakie rozwiązanie zaleca Pani wśród swoich sugestii? – Matthew
Wspomniałem o 'margin-bottom', ponieważ w wielu (najbardziej?) Przypadkach będą elementy poniżej" h1 ". Pytanie, które zakładam, było bardzo uproszczonym przykładem. W rzeczywistym użyciu "margin-bottom" może mieć wpływ. Zgadzam się jednak, że w tym przypadku liczy się tylko "margin-top". –
@Matthew Jeśli nie potrzebujesz marginesu, usunę go. W przeciwnym razie użyłbym 'h1 {display: inline-block}' lub podobnego, aby zapobiec zawaleniu się marginesu. – Oriol