how to remove margins of page in using css

Posted on 2009-02-20
Last Modified: 2012-05-06

I've got the following css file: -

html, body

table-layout: fixed
font-family:"Bookman Old Style","Trebuchet MS", Arial, Helvetica, sans-serif;
color: rgb(255,255,255);

color: rgb(100,100,100);

And the following code: -

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
<link rel="stylesheet" type="text/css" href="Main.css">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
<body class = "body">
    <table class="two" width = "100%" border="0">
    <tr bgcolor="black"><td><p class ="blue">Title Here!!!</p></td> </tr>
    <tr bgcolor="white"><td><p class ="grey" >Title Here!!!</p></td> </tr>

I am trying to find out how I remove the margins that are on the left, right hand side and at the top as I need to make it so the black cell of the table is flush to the page. I have also attached a screenshot. Sorry I am new to css and but hope you can help.

Many Thanks
Question by:ljhodgett
    LVL 39

    Accepted Solution

    The whitespace is not from the body or the html tag, it is the spacing between the cells (even though you only have two cells and one column). Change the table line to this:

    <table class="two" width = "100%" border="0" cellpadding="0" cellspacing="0">

    and you should be ok.
    LVL 27

    Expert Comment


    in the 'two' class.
    LVL 39

    Expert Comment

    To find out where the spacing actually is, I usually add a border around the suspected element. In this case, I wanted to know where the table actually started. So to find out whether the table really starts in the top left corner, I added:

                border: 1px red solid;

    which showed what you see in the partial screenshot. From there it was a lot easier to deduct where the real problem was.

    LVL 39

    Expert Comment

    The hint of nmarun will also work, but your'e guessing then what browsers are using as default spacing. It's usually best to set cellpadding/spacing to zero and then use CSS for real padding and spacing, which puts you in full control.

    The reason for these properties still being there (and annoying you) is historical (backward compatibility). Put as a mnemonic to your mind that whenever you work with tables + CSS in standards compliance modes (i.e.: real xhtml) that you add the ubiquitous cellspacing/padding. This will avoid surprises.

    One tiny thing: The line

    <link rel="stylesheet" type="text/css" href="Main.css" >

    should really be

    <link rel="stylesheet" type="text/css" href="Main.css" />

    to be xhtml compatible (empty tags that can never have content must be closed with "/>", this will stop Visual Studio from complaining and avoids weird behaviors of browsers).
    LVL 39

    Expert Comment

    Glad it worked!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Android App Development

    This course will involve creating widgets, customize list view, grid view, spinners, etc. Creating applications using audio, video, and SQLite database. Ending with publication on Google Play.

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now