All geek questions in one place

How can I get rid of the box around my HTML content?

The following HTML looks fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello</title> </head> <body> <div style="width: 100px; height: 100px; background: red;"> <div>Hello</div> </div> </body> </html>

However, between the left and top edges of my div and the browser window there is a space of about 10 pixels. Is there any way to get rid of it so that the div is “glued” to the browser window?

+4
source share
5 answers

You can add CSS to the document ....

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello</title> <style type="text/css"> body { margin:0; } </style> </head> <body> <div style="width: 100px; height: 100px; background: red;"> <div>Hello</div> </div> </body>

Or you can add CSS as an inline style

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello</title> </head> <body style="margin:0;"> <div style="width: 100px; height: 100px; background: red;"> <div>Hello</div> </div> </body> </html>

All browsers have a default marker around the top and left edges of the window. There is nothing wrong with your page. You just need to tell the browser to remove the default fields.

+7
source

To leave the registration and fields of other elements separately, simply reset the body.

 body { padding: 0; margin: 0; }
+3
source

Try adding style to the body tag, for example:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello</title> </head> <body style="margin: 0;"> <div style="width: 100px; height: 100px; background: red;"> <div>Hello</div> </div> </body> </html>
+1
source

Use CSS reset.

 <style type="text/css">* { padding: 0; margin: 0; }</style>
0
source

If you execute any of the above codes, but you do not set your table properties in percent, not pixels, you will probably still have a margin type space around your page. As in the lower scroll bar, it will still be displayed.

 <table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="4"> <tr> <td width="15%" align="left" valign="top" bgcolor="#B8B8B6"> </td> <td width="85%" bgcolor="#FFFFFF" align="left" valign="top"> </td> </table>
-1
source

Source: https://habr.com/ru/post/1385669/

More articles:


All Articles