1. ホーム
  2. html

[解決済み] div要素間の空白を削除する方法

2022-01-30 12:57:25

質問

3つのdivタグを持つWebページを作成し、それぞれのdivにいくつかのコンテンツを入れ、div要素に背景色を設定したところ、div要素の間にいくつかの空白が現れました。 これらの空白を取り除くために、以下のような様々なプロパティを使用してみました。 outline , margin , padding などがありますが、失敗しました。 の間にある空白を取り除きたいのですが。 div float' プロパティを使用しないでください。 ウェブページスナップショット

<!DOCTYPE html>
<html>
<head>
<style>
body
{
    margin:0px;
    background-color:green;
}
.container
{
    margin-top:0px;
    margin-bottom:0px;
    margin-left:10%;
    margin-right:10%;
}
.head
{
    background-color:gray;
}
.nav
{
    background-color:blue;
}
.content
{
    background-color:lime;
}
</style>
</head>
<body>
<div class="container">
    <div class="head">
        <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
        <h2>some text</h2>
    </div>
    <div class="content">
        <p>Some text in content</p>
    </div>
</div>
</body>
</html>

解決方法は?

h1, h2, p {
    margin: 0;
}

ブラウザが追加 margins は、デフォルトで見出し要素や段落に使用されます。CSSで削除してください。