18

これは一般的な問題のようですが、私が見つけた解決策はどれもうまくいきませんでした。

HTML

<html>
    <head>
        <link rel="stylesheet" href="c/lasrs.css" type="text/css" />
    </head>
    <body>
        <div class="header">
            <img src="i/header1.png">
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. 
               Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
               massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, 
               bibendum at, posuere sit amet, nibh.</p>
        </div>
    </body>
</html>

CSS

body {
    min-width: 950px;
    background-color: #FFFFFF;
    color: #333333;
}

.header {
    width: 950px;
    height: 171px;
    margin: 0px auto;
    padding: 0px;
    background-color: #CCCCCC;
    position: relative;
}

.content {
    width: 950px;
    margin: 0px auto;
    padding: 0px;
    background-color: #E3EEF9;
    position: relative;
}

意図的に画像パスを壊し、.headerdiv の背景色を設定して、それらが接触しているかどうかを確認できるようにしました。これは私のページがどのように見えるかです:

ページの例

ご覧のとおり、両方のパディングとマージンdivsを 0 に設定してみました。

なぜまだギャップがあるのですか？

4

7 に答える 7

20

これは、次の理由によるものです。

<p>ブラウザは、各要素の前後にスペース (マージン) を自動的に追加します。余白は CSS (margin プロパティを使用) で変更できます。

だから試してみてください：

p {
     margin: 0px;
}

注:ブラウザは他の要素にもデフォルトのスタイルを追加します! これは、さまざまな状況で便利にも面倒にもなります。これには、次の 3 つの方法があります。

  1. ブラウザのデフォルト スタイルを完全に削除します。これは、Reset Stylesheetを使用して実現されます。最も人気のあるものは、Eric Meyer の CSS Resetです。あらゆるブラウザで完全にクリーンなスタートを切りたい場合は、Meyer の手法を使用してください。この方法は、スロー*{ margin:0; padding:0; }リセット アプローチを使用するよりも優先されます (理由はこちらを参照してください) 。

  2. スタイルシートを独自のデフォルトに正規化します。Web デザイナーの大きな悩みの種は、ブラウザーごとに異なるデフォルト スタイルが使用されていることです。ただし、完全なリセットには、すべての要素のスタイルを再定義するという時間のかかる問題が伴います。したがって、一貫性のある実用的なデフォルト スタイルの定義済みセットを使用して、ブラウザのすべてのデフォルト スタイルを正規化できます。一般的なアプローチは、これにnormalize.cssを使用することです ( Twitter、Github、およびSoundCloudはこれを使用します!)

  3. 必要に応じてデフォルトを調整するか、意識的にデフォルトを回避してください。デフォルトを使用する最も一般的な方法 (それが最善の方法であるとは言いません) は、デフォルトが存在することを知り、必要に応じて調整することです。デフォルトのスタイルが存在するのには理由があります。それは、開発者が目的の外観をすばやく取得するのに役立つからです。見た目がちょっと違う？それに応じてスタイルを調整するだけです。ただし、正しい要素に正しいタグを使用していることを確認してください。たとえば、インライン テキスト<p>のマージンを削除する代わりに、タグ (デフォルトなし)を使用する必要があります。<span>margin

これは、舞台裏で何が起こっているかを理解するのに役立ちます。

于 2013-07-31T13:36:04.093 に答える
6

段落の余白が div からはみ出しています (これは正常です)。次のいずれかを設定できます。

p {
   margin: 0;
}

またはdivにオーバーフロー隠しを適用する

div {
  overflow: hidden;
}
于 2013-07-31T13:45:08.913 に答える
0

すべてのブラウザにはデフォルトのスタイリング リンク マージン、パディング、行の高さ、フォント スタイリングが付属しており、スタイリングのない要素から始める必要があるため、いくつかのリセット css を使用してみてください。

Eric Meyer リセット CSS の使用をお勧めします ( http://meyerweb.com/eric/tools/css/reset/ )

于 2013-07-31T13:39:43.813 に答える
0

これを試して：

http://jsfiddle.net/JKS3k/3/

CSS

p{
   margin:0;           
}

また

* {
margin:0;
padding:0;
}
于 2013-07-31T13:35:07.110 に答える
0

これを追加します：

*{
    margin: 0;
    padding: 0;
}
于 2013-07-31T13:35:19.327 に答える
0

両方のdivが接触しています。DIV のマージン/パディングはデフォルトで常に 0 であるため、変更しても効果はありません。ただし、<p>にはマージンがあり、div にネストされているため、div にパディングがあるように見えます。

p {
    margin: 0;
}

これを修正します。

于 2013-07-31T13:39:17.353 に答える