Làm thế nào để loại bỏ không gian lề xung quanh cơ thể hoặc mặc định phong cách css mặc định

Tôi thừa nhận là một người mới bắt đầu, nhưng tôi cũng đã làm một số tiền hợp lý của tìm kiếm trước khi đăng bài này. Có vẻ như có thêm không gian xung quanh yếu tố div của tôi. Tôi cũng muốn chỉ ra rằng tôi đã thử nhiều sự kết hợp của biên giới: 0, padding: 0, vv và không có gì dường như để thoát khỏi không gian màu trắng.Làm thế nào để loại bỏ không gian lề xung quanh cơ thể hoặc mặc định phong cách css mặc định

Đây là mã:

<html> 
<head> 
    <style type="text/css"> 
     #header_div { 
      background: #0A62AA; 
      height: 64px; 
      min-width: 500px; 
     } 
     #vipcentral_logo { float:left; margin: 0 0 0 0; } 
     #intel_logo  { float:right; margin: 0 0 0 0; } 
    </style> 
</head> 
<body> 
    <div id="header_div"> 
     <img src="header_logo.png" id="vipcentral_logo"> 
     <img src="intel_logo.png" id="intel_logo"/> 
    </div> 
</body>

Đây là những gì nó trông giống như (I chèn mũi tên màu đỏ để dứt khoát gọi ra thêm không gian):

Extra space around a div element

tôi dự kiến màu xanh sẽ được chuyển trực tiếp đến các cạnh và thanh công cụ của trình duyệt. Các hình ảnh đều chính xác cao 64 pixel và có màu nền giống như màu được gán cho #header_div. Mọi thông tin sẽ được đánh giá cao.

Nguồn

2012-03-03 Anthony

Kiểm tra yếu tố của bạn bằng cách sử dụng tiện ích bổ sung dành cho nhà phát triển web của Google Chrome hoặc Firefox để xem kiểu nào được áp dụng cho nó. Nó có thể là một lề hoặc đệm của phần đầu hoặc phần tử html của trang của bạn. –

Một mẹo đơn giản để tìm ra vị trí của không gian là đặt màu nền cho một thứ khác biệt cho từng phần tử. Cũng như sử dụng các công cụ để kiểm tra các yếu tố ... – kaj

body có lề mặc định: http://www.w3.org/TR/CSS2/sample.html

body { margin:0; } /* Remove body margins */

Hoặc bạn có thể sử dụng này hữu ích toàn cầu reset

* { margin:0; padding:0; box-sizing:border-box; }

Nếu bạn muốn cái gì đó ít hơn *toàn cầu hơn:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
}

một số khác CSS Đặt lại:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
& hellip;

Nguồn

2012-03-03 15:36:20

Cảm ơn tất cả mọi người vì sự giúp đỡ của bạn! Tôi đã thử điều này đầu tiên như là giải pháp "homerun" và nó hoạt động tốt. Đã giải quyết được vấn đề! – Anthony

cố gắng quảng cáo sau trong CSS của bạn:

body, html{ 
    padding:0; 
    margin:0; 
}

Nguồn

2012-03-03 15:34:54 Alex

Đó là lề default/đệm của phần tử body.

Một số trình duyệt có lề mặc định, một số đệm mặc định và cả hai đều được áp dụng làm phần đệm trong phần tử nội dung.

Thêm phần này vào CSS của bạn:

body { margin: 0; padding: 0; }

Nguồn

2012-03-03 15:35:41 Guffa

thử xóa phần đệm/lề khỏi thẻ body.

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

Nguồn

2012-03-03 15:36:43

Cảm ơn vì điều này, tôi biết một lúc sau. Điều này làm việc tốt hơn cho tôi hơn là câu trả lời được chấp nhận – redeagle47

Tôi thấy vấn đề này tiếp tục ngay cả khi đặt BODY MARGIN thành 0.

Tuy nhiên, hóa ra có một cách khắc phục dễ dàng. Tất cả những gì bạn cần làm là cung cấp cho thẻ HEADER của bạn một đường viền 1px, cũng như thiết lập BODY MARGIN thành 0, như hình dưới đây.

body { margin:0px; } 

header { border:1px black solid; }

Nếu bạn có bất kỳ H1, H2, thẻ trong HEADER của bạn, bạn cũng sẽ cần phải thiết lập các MARGIN cho các thẻ bằng không, điều này sẽ thoát khỏi bất kỳ không gian phụ trợ có thể xuất hiện.

Không chắc chắn lý do tại sao tính năng này hoạt động nhưng tôi sử dụng trình duyệt Chrome. Rõ ràng bạn cũng có thể thay đổi màu sắc của đường viền để phù hợp với màu tiêu đề của bạn.

Nguồn

2015-11-02 12:47:12 wardheed

Go với điều này

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

Nguồn

2016-08-05 04:38:17

tôi đã cùng một vấn đề và <p> yếu tố đầu tiên của tôi mà là ở phía trên cùng của trang và cũng đã có một lề webkit mặc định của trình duyệt. Điều này đã đẩy toàn bộ div của tôi xuống mà có tác dụng tương tự như bạn đã nói về để xem ra cho bất kỳ yếu tố dựa trên văn bản mà là ở đầu trang.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My Website</title> 
    </head> 
    <body style="margin:0;"> 
     <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh"> 
<p>Text in Paragraph</p> 
     </div> 
    </div> 
    </body> 
</html>

Vì vậy, hãy nhớ kiểm tra tất cả các phần tử con không chỉ các thẻ html và thẻ body.

Nguồn

2017-12-19 02:57:19 Daniel

Làm thế nào để loại bỏ không gian lề xung quanh cơ thể hoặc mặc định phong cách css mặc định

Trả lời

Các vấn đề liên quan