问题与“浮动：左”下面接壤块级元素元素

<!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

问题与“浮动：左”下面接壤块级元素元素

回答

相关问题