CODEWITHSUNDEEP
htmlcss
Luis Fernando Torreblanca Maca
Luis Fernando Torreblanca Maca

Reputation: 31

How to remove unwanted space in html top, top left and right?

I want to know why in HTML I got an unwanted space when I made a table of the whole page. How can I remove that space? I tried cellpadding="0" and border="0"

Space between the address bar and the page

    <html>
    <head>
    <title>Lord Machine Admin</title>
    </head>
    <body>
    <table width="100%" height="100%" bgcolor="Blue" border="1" cellpadding="0">
        <tr>
            <td>
            </td>
        </tr>
    </table>
    </body>
    </html>

Upvotes: 2

Views: 592

Answers (4)

Arctelix
Arctelix

Reputation: 4576

The body element has a default margin. Just set the body margin to 0 and your all set.

A "CSS RESET" is way overkill and should not be required.

body{
  margin:0;
}
<html>
  <head>
    <title>Lord Machine Admin</title>
  </head>
  <body>
    <table width="100%" height="100%" bgcolor="Blue" border="1" cellpadding="0">
      <tr height="100px">
        <td>
        </td>
      </tr>
    </table>
  </body>
</html>

Upvotes: 2

Paul D. Waite
Paul D. Waite

Reputation: 98806

In most browsers, the <body> element gets a default CSS margin (in Chrome, it’s 8 pixels).

You can remove this default style using CSS:

<html>
<head>
<title>Lord Machine Admin</title>
<style>
    body {
        margin: 0;
    }
</style>
</head>
<body>
<table width="100%" height="100%" bgcolor="Blue" border="1" cellpadding="0">
    <tr>
        <td>
        </td>
    </tr>
</table>
</body>
</html>

As the other answers mention, there are various groups of CSS reset styles out there that attempt to reverse default browser styles in a sensible way, giving you a blank slate to work with.

However, that might be more CSS than you need in your case, or you might end up re-setting default browser styles that you actually want to keep.

Upvotes: 1

Clickys
Clickys

Reputation: 511

This is a CSS RESET . You can use it to reset all the default pre applied margins paddings etc.. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Upvotes: 0

Brian Ogden
Brian Ogden

Reputation: 19212

Use a "CSS Reset" with the CSS Universal selector and remove any default white space that may be browser specific rendered white space or coming from another style sheet:

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

A good place for the "CSS Reset" is at the top of your main website style sheet and your main style sheet should come after any external style sheets like bootstrap.css

Upvotes: 0

Related Questions