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>ですか? firebugを使用してチェックすると（<p class="highlight">Lorem ipsum...</p>）、設定されているようですがmargin-top、cssにコードmargin-bottomがありません。marginなぜ？

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 ) に適用されるいくつかの既定のプロパティがあります。この場合はmargin、<p>要素の

このマージンを取り除くには:

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

デフォルトでは、一部のブラウザでは、一般的なタグのデフォルトの CSS 設定が提供されます。すべての<p>タグは、<div>余分なマージン/パディングを備えたものです。これは、どちらもブロック要素であるためです。<p>、<ul>、<h>、<th>などのタグのブラウザにデフォルトの CSS が表示されます。

ブラウザがデフォルトを使用しないようにするには、段落にデフォルトのマージンとパディングを指定するだけです (または、<div>代わりに a を使用します。例:

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

さまざまなブラウザーのレイアウト間で多くの位置の違いが生じる主な原因の 1 つは、各ブラウザーが特定の要素にスタイルを設定するために適用する既定のスタイルシートによるものです。これには通常、一部の要素にデフォルトのマージンとパディングを設定して、特定の方法で動作させることが含まれます。たとえば、段落 (p) タグには、各段落が垂直方向の空白で区切られ、互いにぶつからないようにマージンが適用されます。見出しタグ (h1 など) を含む他の多くのタグにも同じことが当てはまります。この問題は、これらの要素に適用されるマージン (またはパディング) の量がブラウザー間で一貫していないために発生します。多くの場合、Mozilla/Firefox は要素に上余白と下余白を追加します。ただし、IE は下マージンのみを追加します。

HTML 4 のデフォルト スタイル シート

このスタイルを使用してリセットできます。

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