2016-03-31 28 views
0

Bunun neden gelişmekte olduğundan emin değilim çünkü geliştirici araçlarındaki hiçbir şey, gövdenin beyaz alanın üstünden geçmekte olduğunu gösteriyor. Beyaz alan üzerinde gösterilen tek şey, geliştirici elemanındaki kaynak kodumdaki fareyi html'nin üzerine getirdiğim zamandır.Kenar boşlukları 0'a ayarlandığında gövde üzerinde beyaz boşluk

bodymargin 0 değerine ayarlıyım, bu yüzden neden orada beyaz boşluk olduğumu anlayamıyorum.

Neye sebep olduğuna dair herhangi bir fikri olan var mı?

<body> 
    <header class="header"> 
     <div class="header_wrap"> 
      <span class="nav-btn"></span> 
      <ul class="nav_list"> 
       <a href="/"><li>Home</li></a> 
       <a href="Spray-Foam-Insulation-Material-Suppliers"><li>Spray Foam Insulation</li></a> 
       <a href="Portable-Spray-Foam-Kits"><li>Portable Spray Foam Kits</li></a> 
       <a href="Polyurea"><li>Polyurea</li></a> 
       <a href="Personal-protective-equipment"><li>Personal Protective Equipment</li></a> 
       <a href="Spray-Foam-Equipment-Financing"><li>Financing</li></a> 
       <a href="Contact-us"><li>Contact us</li></a> 
      </ul> 
     </div> 
    </header> 
    <div id="lower-header"> 
     <div id="logo-wrap"> 
      <a href="/"><img src="http://sprayfoamequipmentinsider.com/images/SFEI Logo & CSS/Spray Foam equipment insider 3.jpg" id="header-logo1"></a> 
      <a href="PMC-spray-foam-equipment"><img src="http://sprayfoamequipmentinsider.com/images/Contractor Images/top ad.png" id="header-logo2"></a> 
     </div> 
     <div id="topnav"> 
      <ul> 
      <a href="Spray-Foam-Parts-Repairs-Techs"><li class="last">TECH/PARTS/REPAIRS</li></a> 
      <a href="Spray-Foam-school"><li>SPRAY FOAM SCHOOL</li></a> 
      <a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines"><li>USED/BUY/SELL</li></a> 
      <a href="Spray-Foam-Rigs"><li>SPRAY FOAM RIGS</li></a> 
      <a href="Spray-Foam-equipment"><li>SPRAY FOAM EQUIPMENT</li></a> 
      </ul> 
     </div> 
     <br class="clear" /> 
    </div> 

body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; background-color:#FFFFFF;} 

.header { 
    margin: 0; 
    background-color: #333; 
    height: 50px; 
} 
.header_wrap { 
    text-align: center; 
    margin: 0 auto; 
    position: relative; 
} 
.nav-btn { 
    display: none; 
} 
.nav_list { 
    text-decoration: none; 
    background: #333; 
    color: #FFF; 
    list-style: none; 
    position: relative; 
    z-index: 1; 
} 
.nav_list > a { 
    display: inline-block; 
    padding: 15px 12px; 
    text-decoration: none; 
    transition: ease-in-out .5s; 
} 
.nav_list > a:first-child { 
    padding-left: 0px; 
    margin: 0; 
} 

.nav_list > a > li { 
    text-decoration: none; 
    font-size: 1.1em; 
    color: #FFF; 
} 

#topbar { 
    display:block; 
    position:relative; 
    width:960px; 
    margin:0 auto; 
} 
/* ----------------------------------------------Header------------------------------------- */ 

#lower-header { 
    margin: 0 auto; 
    padding: 10px 0 20px; 
    z-index: 1; 
    color: #666666; 
    background: #000000; 
    border-bottom: 1px solid #363636; 
    width: 100%; 
    overflow: hidden; 
} 
#logo-wrap { 
    width: 960px; 
    margin: 0 auto; 
} 
#header-logo1 { 
    float: left; 
    width: 400px; 
    height: 93px; 
} 
#header-logo2 { 
    float: right; 
    width: 310px; 
    height: 75px; 
} 
#header-logo1, #header-logo2 { 
    border: none; 
} 
/*#lower-header h1, #header p, #header ul{margin:0; padding:0; list-style:none; line-height:normal;}*/ 

#topnav { 
    float: left; 
    padding-top: 22px; 
    width: 100%; 
    text-align: center; 
    font-size: 1.1em; 
    background: #000000; 
    font-family: Georgia, "Times New Roman", Times, serif; 
} 
#topnav li { 
    display: inline-block; 
    padding: 10px 12px 0 12px; 
    border-top: 2px solid transparent; 
} 
#topnav li:hover { 
    border-top: 2px solid #0C3; 
    color: #0C3; 
} 
#topnav a li { 
    color: #FFF; 
    line-height: 1.3em; 
    text-decoration: underline; 
} 

cevap

1

O (yukarı ve body dahil) atalarından ile çöken tarafından müdahale edilmektedir ul.nav_list varsayılan marjları muhtemelen. Bu kenar boşluklarını sıfırlamak düzeltmeli.

0

Stil sayfasını izleyen konsolda boşluk sorununu oluşturun.

ul, menu, dir { 
    display: block; 
    list-style-type: disc; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    -webkit-padding-start: 40px; 
} 

ekran aşağıya bakınız:

.nav_list { 
    text-decoration: none; 
    background: #333; 
    color: #FFF; 
    list-style: none; 
    position: relative; 
    z-index: 1; 
    -webkit-margin-before: 0px; 
    -webkit-margin-after: 0px; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
} 
: enter image description here

aşağıdaki Örnek '.nav_list' CSS sınıfta bu sorun üzerine yazma kenar kaldırmak için