Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get rid of margin around my HTML content?

Tags:

html

The following HTML display 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, there is a space of around 10 pixel between the left and top edges my div and the browser window. Is there a way to get rid of it so that the div is "glued" to the browser window?

like image 613
user380719 Avatar asked Dec 10 '11 17:12

user380719


People also ask

Why is there a margin in HTML?

Margins are used to create space around elements, outside of any defined borders. This element has a margin of 70px.


1 Answers

You could 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 could add the 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 margin around the top and left edge of the window. There's nothing wrong with your page. You merely need to tell the browser to remove the default margins.

like image 95
Scott Avatar answered Sep 30 '22 18:09

Scott