Home/ Questions/Q 7943939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T00:24:57+00:00

Sorry to ask the same question many before me have asked… I have read

  • 0

Sorry to ask the same question many before me have asked… I have read lots of these and they all say change 

margin: 0;

There is a gap between the two divs (div class =”heady” and div class=”menus”) I just can’t seem to get rid of the white space, hopefully it is clear enough, let me know if its not.

Thanks James.

html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>website</title>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <link rel="stylesheet" type="text/css" href="CSS/style1.css" />
    <body>
    <div class="heady">

    <br></br>
    <h1><a class="header" href="index.html">website</a></h1>
    </div>

    <div class="menus">

    <ul>
        <il><a class="list" href="x.html">About</a></il>
        <t> | </>
        <il><a class="list" href="y.html">Beginners</a></il>
        <t> | </>
        <il><a class="list" href="z.html">Advanced</a></il>
        <t> | </>
        <il><a class="list" href="contact.html">Contact</a></il>

    </ul>
    </div>

    </body>
</html>

CSS

/*general rules*/

html,body {
    font-size:11pt;
    font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
    color: black;

    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    background-color: white;
    padding-top: 0px;
    margin-top: 0px;

}

h1 {  
    font-size: 25pt;
    margin-left:10px;
    margin-bottom:0;
    padding-bottom: 0;
}

a:link, a:visited {
    color: white;
}
a:hover, a:active {
    color: grey;
} 



/*header section rules*/
div.heady {
            height: 200px;
            width: 760px;
            padding: 0;
            background-color: grey;
            background-repeat:no-repeat;
             margin: 0;
 }

a.header {
    text-decoration: none;
 }
 a.header:link, a.header:visited, a.header:active,a.header:hover  {
    color: red;
    margin:0;

 } 

 div.menus {
 padding: 0;
 margin:0;
 background-color:black;
 width: 760px;
 text-align: center;
 font-size:12pt;

 }

 a.list {
 margin:0;
 }

Here is a link to a jsFiddle.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Browsers apply default styles to ceratin elements. In this case it’s ul that gets some margin. Note that this margin separates the divs even though the divs themselves have no margins.

    Use

    ul { margin: 0; }

    or include a reset stylesheet

    • 0