0 
<!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设置它，但margincss中没有代码。所以为什么？

4

4 回答 4

0

这行得通！编辑你的 CSS ：

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

有关完整代码，请参见此小提琴。希望这可以帮助..

于 2013-07-23T04:21:05.670 回答
0

浏览器为某些元素应用了一些默认属性（例如：font-size=2emfor h1elements ），在这种情况下， amargin用于<p>元素

摆脱这种保证金使用：

p.highlight{ margin: 0; border: 5px solid #aaa; }
于 2013-07-23T04:22:05.553 回答
0

默认情况下，一些浏览器会给一些常用标签默认的 CSS 设置。一个<p>标签实际上是一个<div>带有一些额外边距/填充的标签。这是因为两者都是块元素。您将在浏览器上的标签上看到默认 CSS，如<p>, <ul>, <h>,<th>等。

只需为您的段落提供默认边距和填充，以防止浏览器使用默认值（或使用 a<div>代替。例如：

p.highlight{
  margin: 0;
  padding: 0; 
  border: 5px solid #aaa; 
}
于 2013-07-23T04:26:07.593 回答
0

各种浏览器中布局之间存在许多位置差异的主要原因之一是每个浏览器应用的默认样式表为某些元素提供样式。这通常涉及为某些元素设置默认边距和填充，以使它们以某种方式运行。例如，段落 (p) 标记将对其应用边距，以便每个段落由垂直空白分隔并且不会相互碰撞。这同样适用于许多其他标签，包括标题标签（h1 等）。出现问题是因为应用于这些元素的边距（或填充）量在浏览器中不一致。在许多情况下，Mozilla/Firefox 会为元素添加上边距和下边距。然而，IE 只会添加底部边距。

HTML 4 的默认样式表

您可以使用此样式重置：

* {margin:0;padding:0}
于 2013-07-23T04:26:50.090 回答