CODEWITHSUNDEEP
html
user380719
user380719

Reputation: 9903

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

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?

Upvotes: 11

Views: 79157

Answers (6)

fullStackNoob
fullStackNoob

Reputation: 11

If you check out freeCodeCamp they use the following code to accomplish this.

I did this exact thing to remove the left and top default margins on the HTML:

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

To prove this worked I placed a 1px solid border around the body element. Once I implemented the above rule the body then filled the entire page with no padding or margin. This is called normalizing the CSS rules.

Upvotes: 1

Claudia Thompson
Claudia Thompson

Reputation: 1

If you do any of the above codes, but you do not set your table properties to percent rather than pixels, you will probably still end up with a margin-type space around your page. Like as in the bottom scroll bar will still show. 

<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>

Upvotes: -1

Scott
Scott

Reputation: 21882

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.

Upvotes: 19

emco
emco

Reputation: 4709

Try adding style to the body tag, like this:

<!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>

Upvotes: 2

Steven Jackson
Steven Jackson

Reputation: 434

To leave the padding and margins of other elements alone, just reset the body.

body { padding: 0; margin: 0; }

Upvotes: 6

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

Use a CSS reset.

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

Upvotes: 1

Related Questions