何が原因で、私のウェブページにこの白い線がなくなるのですか？

私が作成しているウェブページでこの空白を取り除くことに問題があります。それは私のヘッダーとNavbar divの間で発生します。私は別のASP.NETウェブサイトを作って、まったく同じことが起こった。この空白が何を引き起こしているのか、どのように取り除くことができるのか教えてください。何が原因で、私のウェブページにこの白い線がなくなるのですか？

ありがとうございます！

コード：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MainSite.Master.cs" Inherits="EndophthalmitisDatabase.Site1" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Endophthalmitis Database</title> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 

    </asp:ContentPlaceHolder> 
    <style> 
     html,body { 
      margin: 0px; 
      padding: 0px; 
     } 

     div#header { 
      background: #e00; 
      height: 50px; 
      width: auto; 
      border-bottom: solid; 
      border-bottom-color: #b00; 
      font-family: Arial; 
      font-size: 50px; 
      color: #eee; 
      padding: 25px; 
      overflow: auto; 
      margin: 0px; 
     } 

     div#navBar { 
      background: #ddd; 
      height: 35px; 
      width: auto; 
      border-bottom: solid; 
      border-bottom-color: #ccc; 
      font-family: Arial; 
      font-size: 16px; 
      margin: 0px; 
     } 

     div#navBar ul { 
      list-style: none; 
      list-style-type: none; 
      background-color: #ddd; 
     } 

     div#navBar ul li { 
      display:inline; 
     } 

     div#navBar ul li a { 
      padding:.3em; 
      text-decoration: none; 
      color: #900; 
     } 

     div#navBar ul li a:hover{ 
      background-color: #e00; 
      color: #fff; 
     } 

     div#contentDiv { 
      overflow:auto; 
      width: 1000px; 
      height: auto; 
      background-color: #eee; 
      border-left: 2px; 
      border-left-color: #000; 
      border-right: 2px; 
      border-right-color: #000; 
      border-bottom: 2px; 
      border-bottom-color: #000; 
     } 
    </style> 
</head> 
<body> 
    <div id="header"> 
     Endophthalmitis Database 
    </div> 
    <div id ="navBar"> 
     <ul> 
      <li><a href ="Default.aspx">Home</a></li> 
      <li><a href ="DataEntry.aspx">Enter Data</a></li> 
      <li><a href ="Reports.aspx">Reports</a></li> 
      <li><a href ="Contact.aspx">Contact</a></li> 
     </ul> 
    </div> 
    <div id ="contentDiv"> 
     <form id="form1" runat="server"> 
     <div> 
      <asp:ContentPlaceHolder ID="mainContent" runat="server"> 

      </asp:ContentPlaceHolder> 
     </div> 
     </form> 
    </div> 
</body> 
</html>

画像：あなたのUL項目が先頭にマージンを加えている

出典

2016-07-15 Darokrithia

。あなたはパディングとUL上のマージンを削除する必要があります。これらの設定は、ブラウザによって追加され、そうでない場合

ul {margin-top:-10px }

（または、これまでどのような量...

出典

2016-07-15 23:10:10

により、ULをプルアップします任意のCSSのリセットを使用して、それらを手動で削除する必要があります。あなたのCSSで

私はdiv#navBar ulルール

に

margin: 0; 
padding: 0;

を追加しました

これは、レイアウトで簡単に修正できるその他のマイナースタイリングの問題を引き起こしますが、これはあなたの正確な質問に対応します。

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title>Endophthalmitis Database</title> 
 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
 

 
    </asp:ContentPlaceHolder> 
 
    <style> 
 
     html,body { 
 
      margin: 0px; 
 
      padding: 0px; 
 
     } 
 

 
     div#header { 
 
      background: #e00; 
 
      height: 50px; 
 
      width: auto; 
 
      border-bottom: solid; 
 
      border-bottom-color: #b00; 
 
      font-family: Arial; 
 
      font-size: 50px; 
 
      color: #eee; 
 
      padding: 25px; 
 
      overflow: auto; 
 
      margin: 0px; 
 
     } 
 

 
     div#navBar { 
 
      background: #ddd; 
 
      height: 35px; 
 
      width: auto; 
 
      border-bottom: solid; 
 
      border-bottom-color: #ccc; 
 
      font-family: Arial; 
 
      font-size: 16px; 
 
      margin: 0px; 
 
     } 
 

 
     div#navBar ul { 
 
      margin: 0; 
 
      padding:0; 
 
      list-style: none; 
 
      list-style-type: none; 
 
      background-color: #ddd; 
 
     } 
 

 
     div#navBar ul li { 
 
      display:inline; 
 
     } 
 

 
     div#navBar ul li a { 
 
      padding:.3em; 
 
      text-decoration: none; 
 
      color: #900; 
 
     } 
 

 
     div#navBar ul li a:hover{ 
 
      background-color: #e00; 
 
      color: #fff; 
 
     } 
 

 
     div#contentDiv { 
 
      overflow:auto; 
 
      width: 1000px; 
 
      height: auto; 
 
      background-color: #eee; 
 
      border-left: 2px; 
 
      border-left-color: #000; 
 
      border-right: 2px; 
 
      border-right-color: #000; 
 
      border-bottom: 2px; 
 
      border-bottom-color: #000; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="header"> 
 
     Endophthalmitis Database 
 
    </div> 
 
    <div id ="navBar"> 
 
     <ul> 
 
      <li><a href ="Default.aspx">Home</a></li> 
 
      <li><a href ="DataEntry.aspx">Enter Data</a></li> 
 
      <li><a href ="Reports.aspx">Reports</a></li> 
 
      <li><a href ="Contact.aspx">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id ="contentDiv"> 
 
     <form id="form1" runat="server"> 
 
     <div> 
 
      <asp:ContentPlaceHolder ID="mainContent" runat="server"> 
 

 
      </asp:ContentPlaceHolder> 
 
     </div> 
 
     </form> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-07-15 23:10:19 Red2678

任意のCSSのリセットを使用しない場合、 'HTML、' *への一番上にbody'セレクタを '変更するためのより良い解決策ではないでしょうか？ – vkopio

私はいいえと言います。要素のデフォルトのパディング/マージンが期待できる場所がたくさんある可能性があります。そのため、ほとんどのリセットがこれらの値を特定の要素（ul、liなど）に明示的に設定し、*（これは知らない人のためにすべての要素にスタイルを適用する）を使用しない理由です。 – Red2678

何が原因で、私のウェブページにこの白い線がなくなるのですか？

答えて

関連する問題