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

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

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

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

CSS

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

Q&A

解決済

2回答

9428閲覧

謎の空白を消したい。flexが原因?

kotetsu12

総合スコア14

HTML

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

CSS

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

1グッド

0クリップ

投稿2018/01/28 07:03

イメージ説明

画像の右、カテゴリーの上に謎のスペースが出てきます。
原因と消す方法を教えていただきたいです。
(display:flexを消すと空白はなくなるのですが、現状のレイアウトのまま空白を消したいです)

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AOSHI TEMP</title> <link rel="stylesheet" href="style.css" media="screen"> </head> <body> <!-- header --> <div id="header"> <div class="header-wrap"> <a href="#"> <h1>template <img src="#"> </h1> </a> </div> </div> <!-- content --> <div id="all"> <div id="content"> <div class="main"> <!-- menu --> <div class="main-wrap"> <div class="menu-wrap"> <div class="menu"> <ul> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> </ul> </div> </div> <!-- entry --> <div class="post-wrap"> <div class="entry"> <span class="entry-title">記事一覧</span> </div> </div> <!-- box --> <div class="box-wrap"> <div class="big-box"> <a href="#"> <div class="box-thumbnail"> <img src="image/sample.png"> <h2>記事タイトル</h2> </div> </a> </div> <div class="big-box"> <a href="#"> <div class="box-thumbnail"> <img src="image/sample.png"> <h2>記事タイトル</h2> </div> </a> </div> <div class="big-box"> <a href="#"> <div class="box-thumbnail"> <img src="image/sample.png"> <h2>記事タイトル</h2> </div> </a> </div> </div> </div> <!-- pagenation --> <div class="pagenation"> <a href="#">1</a> <a href="#">2</a> <a href="#">></a> </div> </div> <!-- sideber --> <div id="side"> <div class="category-wrap"> <h4 class="side-title">カテゴリー</h4> <ul> <li class="category-name"> <a href="#">タイトル</a> <ul class="children"> <li> <a hrf="#">カテゴリー1</a> </li> <li> <a hrf="#">カテゴリー2</a> </li> <li> <a hrf="#">カテゴリー3</a> </li> </ul> </li> </ul> </div> </div> </div> </div> <!-- footer --> <div id="footer"> <!-- rebirth --> <div class="rebirth"> <a href="#">トップページへ</a> </div> <!-- fot-info --> <div class="fot-wrap"> <div class="fot-info"> <p class="info"> <a href="#">利用規約</a> <a href="#">サイトマップ</a> </p> <p class="fot-info2">© Copyright</p> </div> </div> </div> </body> </html>

CSS

html, body { margin: 0; padding: 0; } body { color: #333; font-size: 17px; line-height: 1.5; font-family: -apple-system,BlinkMacSystemFont, "Helvetica Neue",YuGothic,'Yu Gothic',Verdana, Meiryo,sans-serif; } ul,ol { margin: 0; padding: 0; list-style: none; } a { color: #000; text-decoration: none; } /***************** Layout *****************/ #header{ height: 60px; width: 1440px; } #all{ width: 1440px; background-color: #E8E1DC; } #content{ width: 990px; display: flex; margin: 0 auto; } .main{ width: 628px; } #side{ width: 291px; height: 700px; background-color: #fff; margin-left: 43px; margin-top: 30px; } #footer{ height: 98px; width: 1440px; } /***************** header *****************/ #header{ background-color: #fff; border-bottom: 1px solid #f0ebeb; } .header-wrap{ text-align: center; } /***************** content *****************/ /***************** menu-wrap *****************/ .menu-wrap{ width: 628px; margin-top: 30px; } .menu ul{ display: flex; } .menu a{ flex-grow: 1; margin-right: 2px; } .menu li{ width: 100%; color: #BFBDBD; text-align: center; vertical-align: middle; height: 46px; background-color: #fff; font-size: 20px; font-weight: bold; line-height: 46px; } .menu li:hover{ border-bottom: solid 3px salmon; color: salmon; transition: 0.3s; } /***************** post-wrap *****************/ .entry{ margin: 40px 0 20px 0; } .entry-title{ display: flex; align-items: center; font-weight: bold; font-size: 18px; } .entry-title:before, .entry-title:after{ border-top: 2px solid; content: ""; flex-grow: 1; } .entry-title:before { margin-right: 1rem; } .entry-title:after { margin-left: 1rem; } /***************** box-wrap *****************/ .box-wrap{ display: flex; flex-wrap: wrap; width: 656px; margin-bottom: 30px; } .big-box{ width: 308px; background-color: #fff; text-align: center; transition: 0.5s; margin: 14px 14px 0 0; } .big-box:hover{ transition: 0.5s; transform: translateY(-5px); box-shadow: 0px 5px 10px #A29F9F; } .big-box img{ padding-top: 10px; } .big-box h2{ font-size: 18px; position: relative; bottom: 10px; } /***************** pagenation *****************/ .pagenation{ font-size: 18px; margin-bottom: 120px; } .pagenation a{ color: salmon; margin-right: 8px; } /***************** side *****************/ .category-wrap h4{ height: 50px; line-height: 50px; background-color: salmon; font-size: 18px; color: #fff; padding-left: 8px; }
退会済みユーザー👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

flexが原因ではありません。謎の空白は、h4に初めからついているmarginです。これを消すには、CSSの最後のルールに、marginを追加します。

css

1.category-wrap h4{ 2 height: 50px; 3 margin: 0 auto; /* ← ここです */ 4 line-height: 50px; 5 background-color: salmon; 6 font-size: 18px; 7 color: #fff; 8 padding-left: 8px; 9}

display: flexの要素は、子要素のmarginが突き抜けず、中に収まります。そのため、今回のような状態になります。

今回はh4でしたが、h1やh2、pにもmarginはあります。ブラウザのデフォルトのCSSが邪魔をする場合は、例えば以下のようなCSSを冒頭に置いて、一括で消してしまうといいでしょう。

css

1* { 2 margin: 0; 3}

また「謎の空白」の正体を探るには、ブラウザのインスペクタを活用してください。

イメージ説明

.category-wrapの中身を探してみると、h4の黄色い部分(margin)が上にあることがわかります。

投稿2018/01/28 07:49

編集2018/01/28 08:33
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kotetsu12

2018/01/28 10:19

図解の分かりやすい回答ありがとうございます。 今後はインスペクタをうまく使っていきたいと思います。
guest

0

"usr agent stylesheet"という、デフォルトのcssが効いています。
cssの.category-wrap h4に、margin-top: 0;を追加して下さい。

.category-wrap h4 {
height: 50px;
line-height: 50px;
background-color: salmon;
font-size: 18px;
color: #fff;
padding-left: 8px;
margin-top: 0; /** これを追加 **/
}

カテゴリーの下の空白をも取りたい場合は、
margin: 0;
にして下さい。

投稿2018/01/28 07:51

編集2018/01/28 07:53
shiodokusan

総合スコア25

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

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

kotetsu12

2018/01/28 10:17

ありがとうございます。 大変参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問