SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Udine - Italy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Becoming crazy with margins using DIVs and P tags

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    </head>
    <body>
    			<div style="background-color: #003333; height: 37px;">&nbsp;</div>
    			<div style="background-color: #FFFFCC;"><p style="background-color: #00CC66;">test</p></div>
    			<div style="background-color: #003333; height: 37px;">&nbsp;</div>
    
    <hr>
    
    			<div style="background-color: #003333; height: 37px;">&nbsp;</div>
    			<div style="background-color: #FFFFCC;">test</div>
    			<div style="background-color: #003333; height: 37px;">&nbsp;</div>
    
    </body>
    </html>
    I am just trying to put <p></p> inside a DIV, like I usually do... but this time I am becoming crazy with spaces or margins after DIVs.

    I want them to have bottom and top borders adjacent, like in the second example here in the code where I am not using <p></p>.

    I cannot understand why when I add the p, I also add a such strange margin before and after the central div.

    I can say p { margin: 0; } to fix it but it is not what I want, I need spaces after P.

    Am I become crazy or is there a simple solution that I cannot see at the moment?

    Thanks a lot

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Udine - Italy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    the above solution I am trying does not solve my problem because adds the space after the last P and the next DIV is not ajacent :-(

    Should I use <br /><br /> or <p>&nspc;</p> to get blank rows?
    It doesn't seem a good solution

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
    * { margin:0; padding:0 }
    .mymargin { margin-bottom: 15px; }
    p { background-color: #CC99CC; width: 100px; }
    </style>
    </head>
    <body>
    			<div style="background-color: #003333;">&nbsp;</div>
    			<div style="background-color: #FFFFCC;">
    				<p>test</p>
    				<p>test</p>
    				<p class="mymargin">test</p>
    			</div>
    			<div style="background-color: #003333;">&nbsp;</div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •