web-dev-qa-db-ja.com

CSS-要素間の不要なマージンを削除する方法は？

これはよくある問題のように思えますが、私が見つけた解決策はどれも私にとってはうまくいきませんでした。

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;
}

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

page example

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

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

htmlcssmargin
17
user2638233

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

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

だから試してください：

p {
     margin: 0px;
}

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

  1. ブラウザにある可能性のあるデフォルトのスタイルを完全に削除します。これは、Reset Stylesheetを使用して実現されます。最も人気のあるものは Eric MeyerのCSS Reset です。すべてのブラウザーで完全にクリーンスタートにしたい場合は、Meyerの手法を使用します。このメソッドは、遅い*{ margin:0; padding:0; }リセットアプローチを使用するよりも優先されます（ 理由を読む ）

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

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

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

19
Jean-Paul

段落の余白はdivからあふれています（これは正常です）どちらかを設定できます

p {
   margin: 0;
}

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

div {
  overflow: hidden;
}
6
Fly1nP4nda

使用する

*{
    padding:0;
    margin:0;
}

あなたのスタイルで

4
Roy Sonasish

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

p {
    margin: 0;
}

これを修正します。

0
UweB

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

Eric MeyerのCSSのリセットを使用することをお勧めします（ http://meyerweb.com/eric/tools/css/reset/ ）

0
mironcatalin

これを試して：

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

CSS

p{
   margin:0;           
}

OR

* {
margin:0;
padding:0;
}
0
Falguni Panchal

これを追加：

*{
    margin: 0;
    padding: 0;
}
0
Michael Unterthurner