Q&A
提示コードにファイル名が書かれていないのであてずっぽうですが、
提示のCSSがstyle.cssだったとしたら、reset.cssは何をお使いでしょうか。
l-headerとl-containerの隙間に1pxの余白があるのを詰めたいですが、やり方がわかりません。
このように要素間の謎のスペースができる原因と修正方法を教えてください。
よろしくお願いします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="UTF-8"> 4<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<link rel="stylesheet" href="./css/reset.css"> 8<link rel="stylesheet" href="./css/style.css"> 9<title></title> 10</head> 11<body> 12 <div class="p-all"> 13 <div class="l-center"> 14 <div class="l-header u-clearfix"> 15 <img src="./img/logo/logo1.png" alt="logo" class="l-header__logo"> 16 <img src="./img/logo/top.png" alt="icon" class="l-header__icon" > 17 </div> 18 <div class="l-container u-clearfix"> 19 <div class="p-container__sideMenu"> 20 <ul class="p-container__sideMenu--logo"> 21 <li class="p-container__sideMenu--items"></li> 22 <li class="p-container__sideMenu--items"></li> 23 <li class="p-container__sideMenu--items"></li> 24 <li class="p-container__sideMenu--items"></li> 25 <li class="p-container__sideMenu--items"></li> 26 <li class="p-container__sideMenu--items"></li> 27 <li class="p-container__sideMenu--items"></li> 28 <li class="p-container__sideMenu--items"></li> 29 <li class="p-container__sideMenu--items"></li> 30 <li class="p-container__sideMenu--items"></li> 31 <li class="p-container__sideMenu--items"></li> 32 <li class="p-container__sideMenu--items"></li> 33 </ul> 34 35 <ul class="p-container__sideMenu--shareButton"> 36 <li><a href="#"><img src="img/icon/twitter.png" alt="twitter"></a></li> 37 <li><a href="#"><img src="img/icon/facebook.png" alt="facebook"></a></li> 38 </ul> 39 </div> 40 <div class="p-container__mainMenu"> 41 <ul class="p-container__mainMenu--logo"> 42 <li class="p-container__mainMenut--items"> 43 <img src="img/mainmenu/menu/spr_top01_01.png" alt="service" class="p-container__mainMenu--logoName"> 44 <img src="img/mainmenu/icon/spr_top01_46.png" alt="menu" class="p-container__mainMenu--mainLogo"> 45 <img src="img/mainmenu/menu2/spr_top01_16.png" alt="company" class="p-container__mainMenu--title"> 46 47 </li> 48 <li class="p-container__mainMenut--items"> 49 <img src="img/mainmenu/menu/spr_top01_04.png" alt="service" class="p-container__mainMenu--logoName"> 50 <img src="img/mainmenu/icon/spr_top01_48.png" alt="menu" class="p-container__mainMenu--mainLogo"> 51 <img src="img/mainmenu/menu2/spr_top01_19.png" alt="company" class="p-container__mainMenu--title"> 52 53 </li> 54 <li class="p-container__mainMenut--items"> 55 <img src="img/mainmenu/menu/spr_top01_06.png" alt="service" class="p-container__mainMenu--logoName"> 56 <img src="img/mainmenu/icon/spr_top01_50.png" alt="menu" class="p-container__mainMenu--mainLogo"> 57 <img src="img/mainmenu/menu2/spr_top01_21.png" alt="company" class="p-container__mainMenu--title"> 58 59 </li> 60 <li class="p-container__mainMenut--items"> 61 <img src="img/mainmenu/menu/spr_top01_08.png" alt="service" class="p-container__mainMenu--logoName"> 62 <img src="img/mainmenu/icon/spr_top01_52.png" alt="menu" class="p-container__mainMenu--mainLogo"> 63 <img src="img/mainmenu/menu2/spr_top01_23.png" alt="company" class="p-container__mainMenu--title"> 64 65 </li> 66 <li class="p-container__mainMenut--items"> 67 <img src="img/mainmenu/menu/spr_top01_10.png" alt="service" class="p-container__mainMenu--logoName"> 68 <img src="img/mainmenu/icon/spr_top01_54.png" alt="menu" class="p-container__mainMenu--mainLogo"> 69 <img src="img/mainmenu/menu2/spr_top01_26.png" alt="company" class="p-container__mainMenu--title"> 70 71 </li> 72 <li class="p-container__mainMenut--items"> 73 <img src="img/mainmenu/menu/spr_top01_12.png" alt="service" class="p-container__mainMenu--logoName"> 74 <img src="img/mainmenu/icon/spr_top01_56.png" alt="menu" class="p-container__mainMenu--mainLogo"> 75 <img src="img/mainmenu/menu2/spr_top01_28.png" alt="company" class="p-container__mainMenu--title"> 76 77 </li> 78 <li class="p-container__mainMenut--items"> 79 <img src="img/mainmenu/menu/spr_top01_14.png" alt="service" class="p-container__mainMenu--logoName"> 80 <img src="img/mainmenu/icon/spr_top01_58.png" alt="menu" class="p-container__mainMenu--mainLogo"> 81 <img src="img/mainmenu/menu2/spr_top01_31.png" alt="company" class="p-container__mainMenu--title"> 82 83 </li> 84 <li class="p-container__mainMenut--items"> 85 <img src="img/mainmenu/menu/spr_top01_14.png" alt="service" class="p-container__mainMenu--logoName"> 86 <img src="img/mainmenu/icon/spr_top01_60.png" alt="menu" class="p-container__mainMenu--mainLogo"> 87 <img src="img/mainmenu/menu2/spr_top01_33.png" alt="company" class="p-container__mainMenu--title"> 88 89 </li> 90 <li class="p-container__mainMenut--items"> 91 <img src="img/mainmenu/menu/spr_top01_14.png" alt="service" class="p-container__mainMenu--logoName"> 92 <img src="img/mainmenu/icon/spr_top01_62.png" alt="menu" class="p-container__mainMenu--mainLogo"> 93 <img src="img/mainmenu/menu2/spr_top01_35.png" alt="company" class="p-container__mainMenu--title"> 94 95 </li> 96 <li class="p-container__mainMenut--items"> 97 <img src="img/mainmenu/menu/spr_top01_14.png" alt="service" class="p-container__mainMenu--logoName"> 98 <img src="img/mainmenu/icon/spr_top01_63.png" alt="menu" class="p-container__mainMenu--mainLogo"> 99 <img src="img/mainmenu/menu2/spr_top01_37.png" alt="company" class="p-container__mainMenu--title"> 100 101 </li> 102 <li class="p-container__mainMenut--items"> 103 <img src="img/mainmenu/menu/spr_top01_14.png" alt="service" class="p-container__mainMenu--logoName"> 104 <img src="img/mainmenu/icon/spr_top01_65.png" alt="menu" class="p-container__mainMenu--mainLogo"> 105 <img src="img/mainmenu/menu2/spr_top01_40.png" alt="company" class="p-container__mainMenu--title"> 106 107 </li> 108 <li class="p-container__mainMenut--items"> 109 <img src="img/mainmenu/menu/spr_top01_14.png" alt="service" class="p-container__mainMenu--logoName"> 110 <img src="img/mainmenu/icon/spr_top01_66.png" alt="menu" class="p-container__mainMenu--mainLogo"> 111 <img src="img/mainmenu/menu2/spr_top01_43.png" alt="company" class="p-container__mainMenu--title"> 112 113 </li> 114 </ul> 115 </div> 116 </div> 117 </div> 118 </div> 119</body> 120</html>
CSS
1.u-clearfix::after { 2 content: " "; 3 display: block; 4 clear: both; 5} 6 7.p-all { 8 border-top: 3px solid #f28b1d; 9 background-color: #FBFBF7; 10} 11 12.l-center { 13 width: 950px; 14 margin: 0 auto; 15} 16.l-header { 17 margin-top: 30px; 18} 19 20.l-header__logo { 21 padding: 50px 50px; 22 background-color: #f28b1d; 23 margin-right: 10px; 24 outline-offset: -2px; 25 outline: 1px solid #fff; 26} 27 28.l-header__icon { 29 float: right; 30} 31 32.l-container{ 33 margin-top: 10px; 34} 35 36.p-container__sideMenu { 37 width: 230px; 38 float: left; 39} 40 41.p-container__sideMenu--logo { 42 outline-offset: -2px; 43 outline: 1px solid #fff; 44 display: flex; 45 flex-wrap: wrap; 46 background-color: #f28b1d; 47} 48 49.p-container__sideMenu--items { 50 border-right: 1px dotted #fff; 51 border-top: 1px dotted #fff; 52 box-sizing: border-box; 53} 54 55.p-container__sideMenu--items:nth-child(-n+3) { 56 border-top: none; 57} 58 59.p-container__sideMenu--items:nth-child(3n) { 60 border-right:none; 61} 62 63.p-container__sideMenu--shareButton { 64 display: flex; 65 margin-top: 30px; 66 justify-content: center; 67} 68 69.p-container__mainMenu { 70 float: right; 71 width: 710px; 72} 73 74.p-container__mainMenu--logo { 75 display: flex; 76 flex-wrap: wrap; 77} 78 79.p-container__mainMenut--items { 80 height: 230px; 81 width: 230px; 82 background-color: #fff; 83 margin: 10px 0 0 10px; 84 border: 1px solid #cabfa4; 85 box-sizing: border-box; 86} 87 88.p-container__mainMenut--items:nth-child(-n+3) { 89 margin-top: 0; 90} 91 92.p-container__mainMenut--items:nth-child(3n+1) { 93 margin-left: 0; 94} 95 96.p-container__mainMenu--logoName { 97 padding-top: 10px; 98} 99 100.p-container__mainMenu--mainLogo { 101 display: block; 102 height: 70px; 103 margin: 25px auto 0; 104} 105 106.p-container__mainMenu--title { 107 margin-left: 20px; 108 margin-top: 10px; 109} 110
最低限のコードにしてください。
回答1件
0
お使いのreset.cssの状況にもよるのですが、
原因によっては下記の記述を追加することで改善する可能性がありますので、
お試しいただければ幸いです。
CSS
1 2.l-header img{vertical-align:bottom;} 3
投稿2019/10/30 12:34
総合スコア296
あなたの回答
tips
プレビュー
