2012-06-16 13 views
15

Piszę bardzo prosty kod HTML, który jest wymieniony poniżej. Napisane w notatniku i otwarcie w IE-8 i Firefox (system operacyjny: Windows Vista).Margin and Padding of <Body> Tag

<html> 
<body> 
    <table border="1"><tr><td>test</td></tr></table> 
</body> 
</html> 

W powyższym kodzie nie ma nic szczególnego, ponieważ tworzy on trochę miejsca z lewego górnego rogu.

enter image description here

który można łatwo usunąć za pomocą następującego kodu

<body style="margin:0; padding:0"> 

Teraz mam dowiedzieć się margines domyślną i wyściółkę, która jest 4 dla Firefoksa i inna dla IE-8.

<body style="margin:4; padding:4"> 

Mam kilka pytań na temat tego scenariusza.

  1. Dlaczego ta wartość to 4?
  2. Skąd ta wartość się zbliża, czy jest gdzieś zapisana?
  3. Czy możemy zmodyfikować (skonfigurować) tę domyślną wartość?
  4. Jak te wartości są różne w przypadku przeglądarek?

Dzięki.

+1

W co najmniej Firefox, to zawsze 8PX dla mnie. Zarówno od lewej, jak iz góry. – poepje

+0

@poepje, Yea firefox wydaje się podążać za http://www.w3.org/TR/CSS2/sample.html – Pacerier

Odpowiedz

10
  1. Po pierwsze, prawdopodobnie jest to 4px, a nie 4. Po drugie, tak właśnie powinien być domyślny wybór dostawcy przeglądarki.
  2. Jest zapisany w domyślnych arkuszach stylów przeglądarki.
  3. Możesz, ale Ty nie powinien. Różni się z każdą przeglądarką. Wygoogluj to! How do I change default stylesheet on <insert browser here>?
  4. Prawdopodobnie są nieznaczne różnice, powinieneś być w stanie powiedzieć ... patrząc na arkusze stylów domyślnych :)

Różnica ta jest jednym z głównych powodów, dla których jako projektanci wykorzystują reset CSS, aby znormalizuj całą niezręczność CSS wynikającą z różnych implementacji przeglądarki.

+3

Warto wspomnieć - zmiana zachowania przeglądarki nie jest rozwiązaniem na wszystko. – Onkelborg

+0

Mała uwaga na 3 .: To byłoby dobrze, gdyby strona była przeznaczona tylko do użytku osobistego. Jeśli zostanie opublikowany w Internecie, a inni zobaczą tę stronę, będą mieli margines 4/8px i dzięki temu zobaczą nieco inną stronę niż zamierzano. – poepje

2

Przeglądarki mają wbudowane "standardowe ustawienia" dla CSS większości elementów HTML - to po prostu zapobiega sytuacji, w której twoja strona będzie całkowicie nieczytelna, jeśli masz czysty HTML bez CSS, ale oczywiście ma to być przesłonięcie przez twój własny CSS .

domyślne style przeglądarki są zazwyczaj określane jako „User Agent Style Sheet” - dodaje strona jest dobre referencje od różnych osobliwych arkuszy UA IE mieli w ostatnich latach, a także udostępnia te dla innych przeglądarek w spód:

http://www.iecss.com/

Jedna metoda wiele osób używa do „znormalizować” domyślne więc mają ten sam punkt wyjścia we wszystkich przeglądarkach jest „CSS reset” - to tylko fragment kodu CSS, który umieszczasz przed swoim o wn CSS, który ustawia wszystkie style UA na tę samą rzecz.Jest to dobrze znany jednego:

http://necolas.github.com/normalize.css/

+0

Czy masz źródła do domyślnych stylów innych popularnych przeglądarek, takich jak Chrome i FireFox? – Pacerier

+0

Zobacz na dole strony http://www.iecss.com/ - jednak ta odpowiedź ma dwa lata, nie jestem pewien, jak często ta strona jest aktualizowana. – lucideer

0

Dodaj ten na górze arkusza

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

to wyeliminować wszelkie różnice w padding i margines różnych przeglądarkach.

+3

To jest okropne podejście, ponieważ * select wybierze wszystko. W konsekwencji można ją uznać za bardziej szczegółową niż inne wartości, które możesz ustawić w innym miejscu. Nie wspominając już o usunięciu "normalnych" domyślnych ustawień, może nie zdasz sobie sprawy z tego, że polegasz. – RonLugge

0

Spróbuj

body{ 
    line-height: 0 
}