画像の右、カテゴリーの上に謎のスペースが出てきます。
原因と消す方法を教えていただきたいです。
(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; }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/28 10:19