文本在一個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

您必須注意，瀏覽器對元素有自己的預先定義樣式。

由於“公告板...”是ap標簽，因此瀏覽器將在該元素上添加自己的邊距。 大多數開發人員將使用重置樣式表來避免這些問題。 您也可以添加margin: 0px; 到p標簽，它將解決此問題。

Answer 2

<p>的margin為1em 。 只需使用開發人員控制台檢查代碼。

p{
margin :0;
}

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

Answer 3

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

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

Answer 4

這是因為大多數瀏覽器默認情況下都會在段落標簽中添加一些邊距和填充。 您可以使用css重置文件，也可以自己刪除空白。

#widgetcontainer p{
margin: 0px;
}