2012-06-16 26 views
15

Tôi đang viết một mã HTML rất đơn giản được liệt kê bên dưới. Được viết bằng notepad và mở trong IE-8 và Firefox (OS: Window Vista).Lề và đệm của <Body> Thẻ

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

Không có gì đặc biệt trong mã trên, Nó tạo ra một số không gian từ góc trên cùng bên trái.

enter image description here

nào có thể dễ dàng loại bỏ bằng cách sử dụng đoạn mã sau

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

Bây giờ tôi có tìm hiểu mặc định lề và padding, đó là 4 cho Firefox và khác nhau cho IE-8.

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

Tôi có một số câu hỏi về trường hợp này.

  1. Tại sao giá trị này là 4?
  2. Từ nơi giá trị này đến, nó có được lưu ở đâu đó không?
  3. Chúng tôi có thể sửa đổi (có thể định cấu hình) giá trị mặc định này không?
  4. Các giá trị này khác nhau như thế nào đối với các trình duyệt?

Cảm ơn.

+1

Trong ít nhất Firefox, nó luôn luôn 8px cho tôi. Cả hai từ bên trái cũng như từ đầu. – poepje

+0

@poepje, Yea firefox dường như theo http://www.w3.org/TR/CSS2/sample.html – Pacerier

Trả lời

10
  1. Trước hết, có thể là 4px và không phải 4. Thứ hai, đó chỉ là cách mà nhà cung cấp trình duyệt quyết định là mặc định.
  2. Nó được lưu trong biểu định kiểu trình duyệt mặc định.
  3. Bạn có thể, nhưng bạn không nên. Nó khác với mỗi trình duyệt. Google nó! How do I change default stylesheet on <insert browser here>?
  4. Có lẽ sự khác biệt nhỏ, bạn sẽ có thể nói ... bằng cách nhìn vào stylesheets mặc định :)

khác biệt Đó là một trong những lý do chính của chúng tôi là các nhà thiết kế sử dụng một thiết lập lại CSS, để bình thường hóa tất cả sự lúng túng của CSS sau khi triển khai các trình duyệt khác nhau.

+3

Đáng nói đến - thay đổi hành vi của trình duyệt không phải là giải pháp cho bất kỳ điều gì – Onkelborg

+0

Một lưu ý nhỏ trên 3 .: Điều đó sẽ chỉ tốt nếu trang chỉ dành cho mục đích cá nhân. Nếu nó được xuất bản trên web và những người khác sẽ nhận được để xem trang, họ sẽ có tỷ lệ 4/8px và do đó nhìn thấy một trang hơi khác so với dự định. – poepje

2

Trình duyệt có các "mặc định sane" cho CSS của hầu hết các phần tử HTML - điều này chỉ ngăn trang của bạn trông hoàn toàn không đọc được nếu bạn có HTML thuần túy không có CSS, nhưng tất nhiên chúng được ghi đè bởi CSS của riêng bạn .

Kiểu trình duyệt mặc định thường được gọi là "Bảng kiểu tác nhân người dùng" - trang sau là tài liệu tham khảo tốt về các trang UA đặc biệt mà IE đã có trong nhiều năm và cũng cung cấp cho các trình duyệt khác phía dưới:

http://www.iecss.com/

một phương pháp có rất nhiều người sử dụng để "bình thường hóa" giá trị mặc định, do đó bạn có điểm xuất phát như nhau trong tất cả các trình duyệt là một "CSS reset"- đây chỉ là một là đoạn mã CSS mà bạn đặt trước wn CSS đặt tất cả các kiểu UA thành cùng một thứ.Đây là một nổi tiếng một:

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

+0

Bạn có nguồn để mặc định các kiểu trình duyệt chính khác như Chrome và FireFox không? – Pacerier

+0

Xem phần dưới cùng của trang trên http://www.iecss.com/ - tuy nhiên câu trả lời này là 2 tuổi, tôi không chắc tần suất trang web đó được cập nhật. – lucideer

0

Thêm này trên đầu trang của stylesheet của bạn

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

này loại bỏ tất cả những khác biệt về đệm và lợi nhuận trên các trình duyệt.

+3

Đây là một cách tiếp cận kinh khủng, vì * select sẽ chọn mọi thứ. Và kết quả là, có thể được xem xét cụ thể hơn các giá trị khác mà bạn có thể cố gắng đặt ở nơi khác. Không phải đề cập đến việc loại bỏ mặc định 'sane' bạn có thể không nhận ra bạn dựa vào. – RonLugge

0

Hãy thử điều này

body{ 
    line-height: 0 
} 
Các vấn đề liên quan