[解決済み] 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で削除してください。
関連
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み】あるdivの上に別のdivを重ねる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] 電話番号のマークアップはどのように行うのですか?
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] Bootstrap 4 の mr-auto が正しく動作しない。
-
[解決済み] TD rowspan が機能しない