質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

733閲覧

margin,paddingすると下の要素にも空白がついてしまう

kurimura

総合スコア2

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/20 06:30

背景画像の上に四角、四角の上に文字という構図にしたいのですが文字の入ってる四角にpaddingやmarginをつけようとすると後ろの背景画像にも空白がついてしまいます。
absoluteなども試しましたが窓の大きさを変えるとおかしくなってしまうため出来れば違う方法があるならご教授いただきたいです。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="style.css"> 6</head> 7<body> 8<div class="top-container"> 9 <div class="catch-copy"> 10 <h1>aaaaaaa<br>aaaaaaaaaa</h1> 11 <h1 id="price">1000000円</h1> 12 <button>お問い合わせはこちらから<i class="fas fa-angle-double-right fa-position-left"></i></button> 13 <h2>090-000000000</h2> 14 </div> 15 </div> 16</body> 17</html>

CSS

1.top-container{ 2 background-image:url("3880301_m.jpg"); 3 height:730px; 4 background-position:50% 10% 5} 6 7.catch-copy{ 8 height:200px; 9 margin:20px; 10 width:550px; 11 color:black; 12} 13 14.catch-copy h1{ 15 font-size:70px; 16 background-color:white; 17 color:#88e0d5; 18} 19 20#price{ 21 color:#ff7b3d; 22 font-weight:10px; 23} 24 25button{ 26 font-size:30px; 27 color:white; 28 padding:20px; 29 border-radius:15px; 30 width:500px; 31 height:100px; 32 background-color:rgb(199, 223, 114); 33 box-shadow:0px 7px 2px rgb(58, 104, 44); 34 border: none; 35} 36 37.catch-copy h2{ 38 font-size:80px; 39 font-weight:10px; 40 font-family:cursive; 41}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

親子間のマージンの相殺が原因です。
色々な解決方法がありますが、たとえば、ブロック整形コンテキストを持たせると解決すると思います。

css

1.top-container{ 2 display: flow-root; 3}

参考:

あるブロックの margin-top と、1つ以上の子孫ブロックの margin-top を隔てる境界、パディング、インライン部分、 ブロック整形コンテキストの生成、浮動の解除 (clear) のいずれもがない場合、もしくは、あるブロックの margin-bottom と1つ以上の子孫ブロックの margin-bottom を隔て境界、パディング、インラインコンテンツ、 height, min-height, max-height のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

 

マージンの相殺も、同じブロック整形コンテキストに所属するブロック同士でしか発生しません。

ブロック整形コンテキスト - 開発者ガイド | MDN

投稿2020/10/20 06:38

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurimura

2020/10/20 06:43

こんにちは。 早速ですが試してみたところ解決しました! マージンの相殺なんてものがあったんですね… ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問