不能应用margin-top和padding-top

时间:2014-05-13 05:40:56

标签: css margin padding

为什么我无法在我的html文件中应用padding-top和margin-top?有人可以帮我解决我可能做错的事吗?以下是主要标签:

body{ background-color: #1e2a32; margin:0 auto;}

#pagewrap{ width:1250px; height:auto; margin:auto; }

添加了html标记:

<!doctype html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" class="csstransforms    csstransforms3d csstransitions"><head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cure Sight Laser Center</title>

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

</head>

<body>

 <div id="pagewrap"> <!--pagewrap start-->

 <!--header start-->
 <div id="header"> 


 <div class="top"> 
 <span style="margin-left:50px;">
 <img src="images/phone.png">  
 <span class="text1">+00 000 000 00 </span>
 <img src="images/mail.png">  
 <span class="text1">info@curesightindia.com</span> 
  <contact><a href="#">Contact Us </a>       </contact>
 </span>
 <span style="margin-left:450px; margin-top:30px;"> 
 <img src="images/twitter.png">
 <span style="padding-left:4px;"><img src="images/facebook.png"></span>
 <span style="padding-left:4px;"><img src="images/googleplus.png"></span>
 <span style="padding-left:4px;"><img src="images/linkedin.png"></span>
 <span style="padding-left:4px;"><img src="images/quora.png"></span>
 </span>

 <!-- search form -->
                    <div class="top-search-form">
            <div class="gdl-search-button" id="gdl-search-button">  
  </div> 
            <div class="search-wrapper">
                <div class="gdl-search-form">
                    <form method="get" id="searchform"   
     action="#">

  <div class="search-text">
                            <input type="text" 
  value="Search..." name="s" id="s" autocomplete="off" data-default="Search...">
                        </div>
                        <input type="submit" 
   id="searchsubmit" value="Go!">
                        <div class="clear"></div>
                    </form>
                </div>
            </div>      
        </div>      



     </div><!--top end-->

     <div class="logo"><br>
     <span style="margin-left:30px;"><img src="images/logo.png"></span> </div><!--logo   
     end-->



     <div class="navigation"> 

     <br>


      <!-- Navigation -->


   </div><!--navigation end-->


 <div class="bottom">
  </div><!--bottom end-->


 </div> <!--header end-->


  <div id="slider">


 </div><!--slider ends-->



 <div class="primary">
  <div class="primary_box1">
 <span class="text2" style="padding-left:50px; padding-top:0px;">Why Choose Us</span>  
  <br>
 <div class="text3";>At vero eos et accusamus et iusto odio dignissimos ducimus qui  
   blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas  
    molestias excepturi.</div> </div><!--primary_box1 end-->

   <div class="primary_box2">
    <span class="text2" style="padding-left:50px;">Dr. Parimal Desai</span><br>
  <div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui  
    blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas  
   molestias excepturi.</div> </div><!--primary_box2 end-->


  <div class="primary_box3">
  <span class="text2" style="padding-left:50px;">Myths About lasik</span><br>
    <div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui  
    blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas 
   molestias excepturi.</div> </div><!--primary_box3 end-->


     </div><!--primary end-->



  <div class="secondary">
    <div class="side-left">
   <div class="side-left_top"> <span class="text5"> Video </span> <a href="#"> <img    
   src="images/view-all-btn.png" width="57" height="13"></a></div>
   <span style="margin-right:30px;"> </span>
   </div><!--side-left end-->
   <div class="side-right">
   <div class="side-right_top"> <span class="text5">Testimonials </span><a href="#">
   <span style="margin-left:5%; margin-top:3px;"><img src="images/view-all-btn.png"   
   width="57" height="13"></span></a>
  </div>

  <span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"  
  width="27" height="28"></span>
  <span class="text7"> Lorem Ipsum Dolor</span>
   <p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui  
     blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas 
    molestias excepturi sint occaecati cupiditate non provident. </p> 
      <br>


   <span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg" 
    width="27" height="28"></span>
     <span class="text7"> Lorem Ipsum Dolor</span>
    <p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui 
   blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas  
    molestias excepturi sint occaecati cupiditate non provident.</p> 


   </div><!--side-right end-->

   </div><!--secondary end-->

   </div><!--content end-->

    <!--footer start-->
       <div id="footer">

      <br><br>

     <span class="text4" style="padding-top:50px; padding-left:480px;">Copyright 2013 
     by Cure Sight Laser Centre. All Right Reserved.</span> 
     <span style="margin:0px 0 0 50px"></span> <a href="#top">
      <img src="images/to-the-top.png" width="67" height="13"></a>
     </div><!--footer end-->

     </div><!--pagewrap end-->

   </body>
      </html>

是否发生了因为我已经添加了百分比值? `

1 个答案:

答案 0 :(得分:0)

尝试这样的事情:

您有太多html给您准确的答案 ---请提供CSS给您更好的答案。

见这里:http://jsfiddle.net/aLSXn/3/

HTML:

<div id="container">
    <header id="main-header">
        <h3 id="logo">Some logo</h3>
        <nav id="main-nav">
            <ul>
                <li class="main-nav-link"><a href="#">Nav1</a></li>
                <li class="main-nav-link"><a href="#">Nav2</a></li>
                <li class="main-nav-link"><a href="#">Nav3</a></li>     
            </ul>       
        </nav>  
    </header>
</div>

CSS:

* {
    margin:0;
    padding:0;
}

html, body {
    width:100%;
    background:lightgray;
}

#container {
    width:100%;
}

#main-header {
    display:block;
}

#logo {
    position:absolute;
    top:0;
    left:0;
}

#main-nav {
    display:block;
    background:gray;
    margin:5em 6em;
}

#main-nav ul {
    list-style:none;
}

#main-nav .main-nav-link {
    display:inline-block;
}

#main-nav .main-nav-link a {
    display:inline-block;
    padding:0.8em 1em;
    text-decoration:none;
    color:white;
    font:bold 1em arial;
}

见这里:http://jsfiddle.net/aLSXn/3/