文本坐在一個div比較低

Question

我現在有這個JAVA腳本。

/* ******************************************************************** */ 
 
/*     Generated by: http://csscreator.com     */ 
 
/* ******************************************************************** */ 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    BACKGROUND: #fff; 
 
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; 
 
} 
 
a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    white-spaces: nobreak 
 
} 
 
li { 
 
    color: #fff; 
 
} 
 
body { 
 
    color: #BAC6DE 
 
} 
 
#pagewidth { 
 
    width: 1395px; 
 
    text-align: left; 
 
    margin: 0px auto; 
 
} 
 
#header { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 1395px; 
 
    display: block; 
 
    overflow: none; 
 
    padding: 0px 0px 0px 0px; 
 
} 
 
#header h2 { 
 
    color: #fff; 
 
    padding: 0px 0px 0px 60px; 
 
} 
 
#header p { 
 
    color: #fff; 
 
    padding: 10px 0px 0px 60px; 
 
} 
 
#maincol { 
 
    background-color: #BAC6DE; 
 
    position: relative; 
 
    width: 1395px; 
 
    height: 800px; 
 
    padding: 0px 0px 0px 0px; 
 
    Margin: 0px 0px 0px 0px; 
 
} 
 
#widgetcontainer { 
 
    background-color: #00386B; 
 
    position: relative; 
 
    width: 1175px; 
 
    height: 100%; 
 
    Margin: 0px 0px 0px 0px; 
 
    Padding: 0px 0px 0px 10px; 
 
    Overflow: auto; 
 
} 
 
.widget { 
 
    background-color: #BAC6DE; 
 
    float: left; 
 
    width: 200px; 
 
    height: 100%; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 10px; 
 
} 
 
#result p { 
 
    color: #000; 
 
} 
 
#footer h2 { 
 
    color: fff; 
 
    padding: 0px 0px 0px 0px; 
 
} 
 
#footer p { 
 
    color: fff; 
 
    padding: 0px 50px 0px 60px; 
 
    font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive; 
 
    font-size: 120%; 
 
    margin-right: 2px; 
 
    margin-top: 8px; 
 
} 
 
/* ******************************************************************** */ 
 
/* Clearfix: http://csscreator.com/attributes/containedfloat.php  */ 
 
/* ******************************************************************** */ 
 
.clearfix:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility; 
 
    hidden; 
 
} 
 
.clearfix { 
 
    display: inline-block; 
 
} 
 
/* Hides from IE-mac \*/ 
 
* html .clearfix { 
 
    height: 1%; 
 
} 
 
.clearfix { 
 
    display: block; 
 
} 
 
/* End hide from IE-mac */ 
 
/* ******************************************************************** */ 
 
/* Styling for widgets hover  */ 
 
/* ******************************************************************** */ 
 
.current { 
 
    color: #00386B; 
 
    display: block; 
 
} 
 
.imgHover { 
 
    display: inline; 
 
    position: relative; 
 
} 
 
.imgHover .hover { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
.hover { 
 
    height: 575px; 
 
    width: 200px; 
 
    background: #BAC6DE; 
 
} 
 
.hover a { 
 
    display: block; 
 
    padding: 2px; 
 
    font-size: 80%; 
 
    padding-left: 5px; 
 
} 
 
.hover a:link { 
 
    /* Applies to all unvisited links */ 
 
    text-decoration: none; 
 
    font-weight: none; 
 
    background-color: #BAC6DE; 
 
    color: #fff; 
 
} 
 
.hover a:hover { 
 
    /* Applies to links under the pointer */ 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    background-color: #BAC6DE; 
 
    color: #fff; 
 
} 
 
.input { 
 
    border: 2px inset #fff; 
 
    background: #eee; 
 
    height: 30px; 
 
    margin-bottom: 40px; 
 
} 
 
.input:hover { 
 
    border: 2px solid #f00; 
 
    background: #ff6; 
 
} 
 
.button { 
 
    display: none; 
 
} 
 
label { 
 
    display: block; 
 
    width: 150px; 
 
    float: left; 
 
    margin: 2px 4px 6px 4px; 
 
    text-align: right; 
 
} 
 
br { 
 
    clear: left; 
 
} 
 
/* ******************************************************************** */ 
 
/* Styling for console panel  */ 
 
/* ******************************************************************** */ 
 
a:focus { 
 
    outline: none; 
 
} 
 
a.trigger { 
 
    position: absolute; 
 
    background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    letter-spacing: -1px; 
 
    font-family: verdana, helvetica, arial, sans-serif; 
 
    color: #fff; 
 
    padding: 4px 12px 6px 30px; 
 
    font-weight: bold; 
 
    z-index: 2; 
 
} 
 
a.trigger.left { 
 
    left: 0; 
 
    border-top-right-radius: 5px; 
 
    -moz-border-radius-topright: 5px; 
 
    -webkit-border-top-right-radius: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 
a.trigger.right { 
 
    right: 0; 
 
    border-bottom-left-radius: 5px; 
 
    border-top-left-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    -moz-border-radius-topleft: 5px; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -webkit-border-top-left-radius: 5px; 
 
} 
 
a.trigger:hover { 
 
    background-color: #59B; 
 
} 
 
a.active.trigger { 
 
    background: #666 url(../images/minus.png) 6% 55% no-repeat; 
 
} 
 
.panel { 
 
    color: #CCC; 
 
    position: absolute; 
 
    display: none; 
 
    background: #9E00F8; 
 
    height: 800px; 
 
    width: 800px; 
 
    z-index: 1; 
 
} 
 
.panel.left { 
 
    left: 0; 
 
    padding: 26px 0px; 
 
    border-top-right-radius: 15px; 
 
    -moz-border-radius-topright: 15px; 
 
    -webkit-border-top-right-radius: 15px; 
 
    -moz-border-radius-bottomright: 15px; 
 
    -webkit-border-bottom-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
} 
 
.panel p { 
 
    font-size: 11px; 
 
}

<!doctype html> 
 
<html> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
    <title>Hub Page</title> 
 
    <meta charset="utf-8" /> 
 
    <meta generator="csscreator.com" /> 
 

 
    <!--[if IE]> 
 
    <script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script> 
 
    <![endif]--> 
 

 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
 
    <script type="text/javascript" src="js/jquery.slidePanel.min.js"></script> 
 

 

 

 
    <script> 
 
    $(function() { 
 
     $(".imgHover").hover(function() { 
 
     $(this).children("img").fadeTo(200, 0.1).end().children(".hover").show(); 
 
     }, function() { 
 
     $(this).children("img").fadeTo(200, 1).end().children(".hover").hide(); 
 
     }); 
 
    }); 
 
    </script> 
 

 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 

 
     // default settings 
 
     // $('.panel').slidePanel(); 
 

 
     // custom settings 
 

 
     $('#panel2').slidePanel({ 
 
     triggerName: '#trigger1', 
 
     triggerTopPos: '0px', 
 
     panelTopPos: '0px' 
 
     }); 
 

 
    }); 
 
    </script> 
 

 
    <SCRIPT LANGUAGE="JavaScript"> 
 
    function ClipBoard() { 
 
     holdtext.innerText = copytext.innerText; 
 
     Copied = holdtext.createTextRange(); 
 
     Copied.execCommand("RemoveFormat"); 
 
     Copied.execCommand("Copy"); 
 
     alert("Template Copied"); 
 
    } 
 
    </SCRIPT> 
 

 
    <!-- Please link back to http://csscreator.com --> 
 
    <link rel="stylesheet" href="style/homepage.css" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <div id="pagewidth"> 
 
    <div id="header"> 
 

 
     <IMG SRC="images/header.jpg" align=right> 
 
     </a> 
 

 
     <TEXTAREA ID="holdtext" STYLE="display:none;"> 
 
     </TEXTAREA> 
 
     <SPAN ID="copytext" STYLE="height:150;width:162;display:none;"> 
 
    http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN> 
 

 
     </P> 
 
    </div> 
 
    <div id="wrapper" class="clearfix"> 
 
     <div id="maincol"> 
 
     <div class="widget"> 
 
      <div class="hover"> 
 

 
      <!----------START NAVIGATION PANEL-----------> 
 
      <a href="TEAM HOME.htm" class="current">TEAM HOME</a> 
 
      <a href="BASE.htm">KANA IQ</a> 
 
      <a href="EMAIL DRAFTS.htm">EMAIL DRAFT</a> 
 
      <a href="TEAM DOCUMENTS.htm">TEAM DOCUMENTS</a> 
 
      <!----------END NAVIGATION PANEL-----------> 
 

 
      </div> 
 
     </div> 
 

 
     <div id="widgetcontainer"> 
 

 
      <!----------Start Team Home Links-----------> 
 
      <font size=5><strong><p>Bulletin Board. . .</p></strong></font> 
 
      <P>Please Enter Your First Bulletin Here . . .</P> 
 
      <!----------End Team Home Links-----------> 
 

 
     </div> 
 

 
     <br clear=all> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

請誰能告訴我爲什麼在右手DIV（深藍色）文本比在左邊的DIV（淺藍色）文本低？

我已經改變了填充，邊距，但我不能讓它正確地排隊。

Answer 1

你必須注意到，瀏覽器對元素自己defiend預風格。

正如「公告板...」是一個p標籤，瀏覽器將自己的利潤率添加到該元素。大多數開發人員將使用重置樣式表來避免這些問題。您也可以將margin: 0px;添加到p標籤中，它可以解決問題。

Answer 2

<p>有margin的1em。只需使用開發控制檯檢查代碼即可。

p{ 
margin :0; 
} 

這會解決它。但請使用normalize.css修復瀏覽器特定的默認值。

Answer 3

試試這個：您的問題是p標記的邊距。它有默認的保證金。因此，您可以通過下面的代碼

添加p{margin:0;}代碼中CSS

Answer 4

這是因爲大多數瀏覽器在默認情況下添加一些邊距和補段落標記重置p標籤的邊緣。您可以使用css重置文件，或者只是自己刪除邊距。

#widgetcontainer p{ 
margin: 0px; 
}