khan1992 Posted December 10, 2013 Share Posted December 10, 2013 Every time i build a website i always get mysterious borders appearing. Heres the code i have <!DOCTYPE html><head><html><title>Untitled Document</title><link href="mainstylesheet.css" rel="stylesheet" type="text/css" /><style>.body{ margin: 0px; padding-bottom: none; }</style></head><body><div class="header">stuff</div><div class="content1">stuff</div><div class="content2">stuff</div><div class="content3">stuff</div><div class="footer">stuff</div></body></html> so i always end up doing trial and error and changing padding and what not. Can someone give me a surefire method to avoid this Link to comment Share on other sites More sharing options...
Ingolme Posted December 10, 2013 Share Posted December 10, 2013 Remove padding and margin from both the <body> element and the <html> element: html, body { margin: 0; padding: 0;} Link to comment Share on other sites More sharing options...
khan1992 Posted December 10, 2013 Author Share Posted December 10, 2013 (edited) Yeh thanks that seemed to do the trick around all the divs but now theres gaps between the divs <!DOCTYPE html><head><html><title>Untitled Document</title><link href="mainstylesheet.css" rel="stylesheet" type="text/css" /><style></style></head><body><div class="header"> <p>stuff</p> <p> </p></div><div class="content1"> <p>stuff</p> <p> </p></div><div class="content2"> <p>stuff</p> <p> </p></div><div class="content3"> <p>stuff</p> <p> </p> <p> </p> <p> </p></div><div class="footer"> <p>stuff</p> <p> </p></div></body></html> @charset "utf-8";html, body, header,content1,content2,content3,footer { margin: 0; padding: 0;}.header { background-color: #FFF; margin: 0; padding: 0;}.content1 { background-color: #333; }.content2 { background-color: #06F;}.content3 { background-color: #999;}.footer { background-color: #CCC;} Edited December 10, 2013 by khan1992 Link to comment Share on other sites More sharing options...
davej Posted December 15, 2013 Share Posted December 15, 2013 Keep it as one file until it is so big that you need to break it up... it is less confusing as one file... <!DOCTYPE html><html><head><meta charset="utf-8"><title>Untitled</title><style>*{margin: 0;padding: 0;}.header {background-color: #FFF;margin: 0;padding: 0;}.content1 {background-color: #333; }.content2 {background-color: #06F;}.content3 {background-color: #999;}.footer {background-color: #CCC;}</style></head><body><div class="header"> <p>stuff</p> <p> </p></div><div class="content1"> <p>stuff</p> <p> </p></div><div class="content2"> <p>stuff</p> <p> </p></div><div class="content3"> <p>stuff</p> <p> </p> <p> </p> <p> </p></div><div class="footer"> <p>stuff</p> <p> </p></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted December 15, 2013 Share Posted December 15, 2013 There are gaps between the <div> elements because the <p> elements have margins. You can either remove the margins from the <p> elements or add some padding to the top and bottom of the <div> elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now