これはよくある問題のように思えますが、私が見つけた解決策はどれも私にとってはうまくいきませんでした。
<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>
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の背景色を設定して、それらが触れているかどうかを確認できるようにしました。これは私のページのようです:
ご覧のとおり、divs
の両方のパディングとマージンを0に設定しようとしました。
なぜまだギャップがあるのですか?
これは次の理由によるものです。
ブラウザは、各
<p>
要素の前後にスペース(マージン)を自動的に追加します。マージンは、CSSで(マージンプロパティを使用して)変更できます。
だから試してください:
p {
margin: 0px;
}
注:ブラウザは、他の要素にもデフォルトのスタイリングを追加します!これは、さまざまな状況で便利で迷惑です。これには次の3つの方法があります。
*{ margin:0; padding:0; }
リセットアプローチを使用するよりも優先されます( 理由を読む )スタイルシートを独自のデフォルトに正規化します。ウェブデザイナーの大きな悩みの種は、ブラウザごとにデフォルトのスタイルが異なることです。ただし、完全なリセットには、すべての要素のスタイルを再定義するという時間のかかる問題が伴います。したがって、一貫性のある適切なデフォルトスタイルの定義済みセットを使用して、ブラウザのすべてのデフォルトスタイルをnormalizeできます。一般的なアプローチは、このために normalize.css を使用することです(Twitter 、GithubおよびSoundCloudこれを使用してください!)
必要に応じてデフォルトを調整するか、デフォルトを意識的に回避します。デフォルトで作業するための最も一般的な方法(最良の方法とは言いません)は、それらが存在することをknowし、必要に応じて調整することです。デフォルトのスタイルには理由があります。開発者が目的の外観をすばやく取得できるようにするためです。見た目は少しずれていますか?それに応じてスタイルを調整するだけです。ただし、正しい要素には正しいタグを使用してください。たとえば、 インラインテキスト の<p>
マージンを削除する代わりに、<span>
タグを使用する必要があります(デフォルトのmargin
はありません)
これは、舞台裏で何が起こっているのかを理解するのに役立つはずです。
段落の余白はdivからあふれています(これは正常です)どちらかを設定できます
p {
margin: 0;
}
または、divに隠されたオーバーフローを適用します
div {
overflow: hidden;
}
使用する
*{
padding:0;
margin:0;
}
あなたのスタイルで
両方のdivが触れています。 DIVのマージン/パディングはデフォルトで常に0であるため、変更は効果がありません。 <p>
ただし、マージンがあり、divにネストされているため、divにパディングがあるように見えます。
p {
margin: 0;
}
これを修正します。
すべてのブラウザにはデフォルトのスタイリングリンクマージン、パディング、行の高さ、フォントスタイリングがあり、スタイリングなしの要素から開始する必要があるため、リセットCSSを使用してみてください。
Eric MeyerのCSSのリセットを使用することをお勧めします( http://meyerweb.com/eric/tools/css/reset/ )
これを追加:
*{
margin: 0;
padding: 0;
}