問題與「浮動：左」下面接壤塊級元素元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
    <title>"float: left" element </title> 
    <style type="text/css" media="screen"> 
    body { 
     margin: 20px; 
     padding: 0; 
     font: normal 85% arial, helvetica, sans-serif; 
     color: #000; 
     background-color: #fff; 
    } 
    .containingbox { 
     width: 400px; 
     height: 400px; 
     border: 1px solid #000; 
    } 
    .floatleft { 
     float: left; 
     width: 100px; 
     height: 100px; 
     border: 2px solid #F63; 
    } 
    p.highlight { border: 5px solid #aaa; } 
</style> 
</head> 
<body> 
    <div class="containingbox"> 
     <div class="floatleft"></div> 
     <p class="highlight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
    </div> 
</body> 
</html>

問：問題與「浮動：左」下面接壤塊級元素元素

爲什麼此塊內容與邊框：<p class="highlight">Lorem ipsum...</p>在同一水平<div class="floatleft"></div>沒有顯示？當我用螢火蟲檢查它（<p class="highlight">Lorem ipsum...</p>）時，似乎有margin-top和margin-bottom爲它設置，但在css中沒有margin代碼。所以爲什麼？

來源

2013-07-23 user2507818

把你的代碼中的jsfiddle。這將更容易調試 – Exception

默認情況下，某些瀏覽器提供了一些通用標籤的默認CSS設置。所有<p>標籤確實是一個<div>與一些額外的保證金/填充。這是因爲兩者都是塊元素。你會看到默認的CSS在瀏覽器上的標籤，如<p>，<ul>，<h>，<th>等

時，只需提供您的段落默認margin和padding防止瀏覽器使用默認值（或使用<div>代替，例如：

p.highlight{ 
    margin: 0; 
    padding: 0; 
    border: 5px solid #aaa; 
}

來源

2013-07-23 04:26:07 BLaZuRE

這工作！編輯你的CSS：

p.highlight { margin: 0; padding: 0; border: 5px solid #aaa; }

完全代碼見this fiddle。希望這有助於..

來源

2013-07-23 04:21:05

瀏覽器已經申請了一些元素的一些默認屬性：爲<p>元素

擺脫這種保證金使用的margin（前font-size=2em爲h1元素），在這種情況下，：

p.highlight{ margin: 0; border: 5px solid #aaa; }

來源

2013-07-23 04:22:05

一個用於在各種瀏覽器的佈局之間的許多位置差的主要原因是由於默認的樣式表的每個瀏覽器適用於給定型到某些元件，這通常涉及到設置默認邊距和填充到一些元素，使他們以某種方式表現。對於實例中，段落（p）標籤將應用邊距，以便每個段落之間用垂直空格分隔，而不會碰到彼此。這同樣適用於許多其他標籤，包括標題標籤（h1等）。發生此問題的原因是應用於這些元素的邊距（或填充）在瀏覽器中不一致。在很多情況下，Mozilla/Firefox都會爲元素添加頂部邊距以及底部邊距。然而IE只會添加一個底部邊距。如果您當時並排查看這兩個瀏覽器，則會看到由於Mozilla應用了頂部邊距而導致的對齊情況會有所不同，這可能會導致您的設計無法按預期排列。

Default style sheet for HTML 4

您可以使用此方式來重置：

* {margin:0;padding:0}

來源

2013-07-23 04:26:50

問題與「浮動：左」下面接壤塊級元素元素

回答

相關問題