Jestem nowy w tworzeniu stron internetowych i napotkałem problem przy usuwaniu marginesu ciała.Usuwanie marginesu ciała w CSS
Istnieje przestrzeń pomiędzy samej górze okna przeglądarki i „logo” tekstu. A mój kod to here on jsbin.
Czy błędnie jest body { margin: 0;}, jeśli chciałbym usunąć miejsce?
Powiedziałbym, że za pomocą:
* {
margin: 0;
padding: 0;
}
jest złym sposobem rozwiązania tego.
Powodem pojawienia się marginesu h1 dla rodzica jest to, że rodzic nie ma dopełnienia.
Jeśli dodasz dopełnienie do elementu nadrzędnego h1, margines znajdzie się wewnątrz elementu nadrzędnego.
Resetowanie wszystkie paddings i marginesy na 0 mogą powodować wiele efektów ubocznych. Lepiej jest usunąć margines-górny dla tego konkretnego nagłówka.
Jakie skutki uboczne? Jedyne, co wiem, to że może być lepiej, aby wydajność zresetowała się w następujący sposób: body, div, p, a, img, h1, h2 .... {padding: 0; margin: 0;} – davedadizzel
Musisz wykonać więcej pracy, aby ponownie zastosować marginesy i/lub dopełnienie do elementów, które chcesz (masz pełną kontrolę, ale musisz wykonać więcej pracy). Oczywiście wszystko to jest preferowane przez osobę kodującą, ale dla mnie lubię "normalize.css" lepiej niż "reset.css". – andeersg
Yup. Słyszałem o tym wcześniej. Być może próba użycia normalizacji jest bardziej ukierunkowana na resetowanie marginesu/dopełnienia. Dzięki! – chenghuayang
wciąż masz margines na tagu h1
Więc trzeba usunąć to tak:
h1 {
margin-top:0;
}
Problem jest z marginesem h1 nagłówka. Musisz spróbować tego:
h1 {
margin-top:0;
}
To powinno pomóc pozbyć marginesie nadwozia i domyślnie górny margines <h1> tagu
body{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
polecam, aby zresetować wszystkie elementy html przed pisania css z : *{ margin: 0; padding: 0; }
Po tym można napisać niestandardowe css, bez żadnych problemów.
Możesz użyć CIAŁA lub *, aby margines i dopełnienie 0px;
*{
margin: 0px;
padding:0px;
}
Właściwa odpowiedź na to pytanie to "reset css".
* {
margin: 0;
padding: 0;
}
Usuwa cały domyślny margines i dopełnienie dla każdego obiektu na stronie, bez blokowania, niezależnie od przeglądarki.
Niektóre elementy HTML mają predefiniowane marże (mianowicie: body, h1 do h6, p, fieldset, form, ul, ol, dl, dir, menu, i dd).
W twoim przypadku przyczyną problemu jest h1. Domyślnie jest to { margin: .67em }. Jeśli ustawisz wartość 0, usunie to miejsce.
Aby ogólnie rozwiązać takie problemy, zalecamy korzystanie z przeglądarki dev tools. W przypadku większości przeglądarek: kliknij prawym przyciskiem myszy element, który chcesz wiedzieć więcej i wybierz "Sprawdź element". W zakładce "Style" na samym dole masz model pudełkowy CSS. Jest to doskonałe narzędzie do wizualizacji obramowań, wypełnień i marginesów oraz elementów, które są źródłem bólu głowy.
Problem ten był kontynuowany nawet po ustawieniu MARGINU BODY na zero.
Jednak okazuje się, że jest łatwa naprawa. Wszystko, co musisz zrobić, to nadać swojemu znacznikowi HEADER granicę 1px, jak również ustawić MARGINĘ BODY na zero, jak pokazano poniżej.
body { margin:0px; }
header { border:1px black solid; }
Być może trzeba zmienić margines do zera za każdym H1, H2 itp elementy macie w nagłówku div. Spowoduje to pozbycie się dodatkowej przestrzeni, która może się pojawić wokół tekstu.
Nie wiem, dlaczego to działa, ale korzystam z przeglądarki Chrome. Oczywiście można również zmienić kolor obramowania, aby pasował do koloru nagłówka.
prostu usunąć domyślną przeglądarkę
MarginiPaddingZastosuj górze CSS.
<style>
* {
margin: 0;
padding: 0;
}
</style>
UWAGA:
html elements przed pisania CSS.lub [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 –