css - CSSでdiv間の空白を削除するには?

Question

基本的な HTML と CSS で自分をリフレッシュするために、非常にシンプルな Web サイトを構築しています。ドリームウィーバーCS6を使用しています。私はあらゆる側面を「正しい」方法で学びたいと思っています。マージンを使用して div を必要な場所 (上または下) に移動できると思いますが、それが正しい方法であるかどうかはわかりません。

ここに例があります。スクリーンショットを撮りました。

http://i.imgur.com/YyYpfcz.png

ヘッダーとコンテナー div の上部の間にギャップがあります。コンテンツ div と、ヘッダーおよびフッター div の両方の間にギャップがあります。

これらのdivを互いにフラッシュしてギャップを取り除くにはどうすればよいですか? ありがとう！

注：私はこのサイトでこれに似た他の質問をすべて調査しましたが、これとまったく同じものはなく、最も基本的な形でこの問題を解決する答えもありません。

編集：誰もが自分のやり方が正しいと言って、さまざまな答えがたくさんありました。これは私を混乱させました。そして、私は彼らの最初の投稿のそれぞれに答えを得ていません. これらの div がデフォルトで互いにフラッシュされない理由に興味があります。後でサイトでさらに div を作成します。なぜあなたのメソッドが機能するのか理解できない場合、サイト上のこれ以上の div に実装することはできません。ありがとう！

score 1 · Accepted Answer

あなたが探しているものは完全にはわかりません。あなたはまだ物事をいじる必要があります、obvs。しかし、これがあなたにとって良いスタートであるかどうかを確認してください. background colorセクションを表示するために追加しました。削除できます。

http://jsfiddle.net/NbP4x/1/

Dreamweaver を使用して、最初の Web サイトを作成するための優れたチュートリアルを次に示します。ここから始めてください。:) http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

score 1 · Accepted Answer

デフォルトのスタイルがあるため、使用します

h1{margin: 0px;padding: 0px;}

それを修正できます。

すべてのデフォルトのスタイルをリセットすることをお勧めします

*{margin: 0px;padding: 0px;}

さらにCSSをリセットすると、ここにリンクの説明を入力してください。

詳細については:)

score 1 · Accepted Answer

はい、Eric Meyer のリセットは「正しい方法」の 1 つであり、* を使用するよりもはるかに優れています。

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
<title>North Carolina Golf Car Dealers</title>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#container {
     width: 960px;
     margin: 0 auto;
}
</style>
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>Header goes here.</h1>
         </div>
         <div id="content">
            <p>Content goes here</p>
         </div>
         <div id="footer">
            <p>Footer goes here.</p>
         </div>
     </div>
</body>
</html>

理想的には、外部スタイルシートを使用して HTML と CSS を分離する必要があります。

HTML: index.html (例)

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
<title>North Carolina Golf Car Dealers</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>Header goes here.</h1>
         </div>
         <div id="content">
            <p>Content goes here</p>
         </div>
         <div id="footer">
            <p>Footer goes here.</p>
         </div>
     </div>
</body>
</html>

CSS: style.css (例)

@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#container {
     width: 960px;
     margin: 0 auto;
}

注: CSS #container を次から変更しました。

    #container {
     width: 960px;
     margin-right: auto;
     margin-left: auto

に：

    #container {
     width: 960px;
     margin: 0 auto;
}

margin-right と margin-left を組み合わせる (両方の方法が機能します...)

score -2 · Accepted Answer

div 間のスペースではなく、行の高さの問題のようです。div に境界線を追加してみて、それらが接触しているかどうかを確認してください。

div { ボーダー : 1px ベタ黒; }

score -3 · Accepted Answer

'p' の特徴だと思いますが、div#content 内の 'p' を削除してみると、ギャップが削除できると思います。

css - CSSでdiv間の空白を削除するには?

5 に答える 5

Related

Reference