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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

296閲覧

IMGやPの下に余白ができるのを消したいです。

negiremi

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2022/04/27 02:12

初めまして。HTML CSS初心者です。
IMGやPの余白を消したいです。
こちらの余白はなぜできてしまうのでしょうか?
vertical-align: bottom;や
paddingを0にしてみても消えませんでした。。
分かる方いらしたら教えて頂きたいです。
よろしくお願いします。

イメージ説明

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>ジェラテリア旬</title> 8 <link rel="stylesheet" href="css/slick.css"/> 9 <link rel="stylesheet" href="css/slick-theme.css"/> 10 <link rel="stylesheet" href="css/white.css"/> 11 <link rel="preconnect" href="https://fonts.googleapis.com"> 12<link rel="preconnect" href="https://fonts.googleapis.com"> 13<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 14<link href="https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@100&family=Bitter&family=Kaisei+Tokumin&family=Kiwi+Maru&family=Kosugi+Maru&family=Lora:ital@1&family=Zen+Maru+Gothic:wght@500&family=Sawarabi+Gothic&family=Zilla+Slab:wght@300&display=swap" rel="stylesheet"> 15</head> 16<body> 17<header> 18<div class="heddanowaku"> 19<h1 class="geratorogo"><img class="rogonaosi" src="img/rogonaosi+.png"></h1> 20<ul class="hako"> 21<li><a href="">トップ<br><div class="kazarimoji"><p2>TOPPAGE</p2></div></a></li> 22<li><a href="">ジェラート<br><div class="kazarimoji"><p2>GELATO</p2></div></a></li> 23<li><a href="">お問合せ<br><div class="kazarimoji"><p2>CONTACT</p2></div></a></li> 24<li><a href="">アクセス<br><div class="kazarimoji"><p2>ACCESS</p2></div></a></li> 25</ul> 26</div> 27</header> 28 <ul class="slider"> 29 <li><a href="#"><img src="img/aisu1.jpg" alt="###"></a></li> 30 <li><a href="#"><img src="img/aisu2.jpg" alt="###"></a></li> 31 <li><a href="#"><img src="img/aisu3.jpg" alt="###"></a></li> 32 </ul> 33 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 34 <script src="js/slick.min.js"></script> 35 <script src="js/main.js"></script> 36 <div id="wrapper"> 37 <article> 38 <div class="top_setumei"><h1 class="kakumidasi">ごあいさつ</h1> 39 <p><img src="img/baigetsu02.jpeg" class="baigetunogazo"> 40 長野県茅野市にある老舗和菓子店、梅月が運営するジェラートショップです。 41 さまざまな美味しい手作りジェラートが自慢です。 42 梅月米沢店の店内に併設営業しております。 43 旬なジェラートが楽しめる店舗として地元の方や観光客の方から 44 愛されているジェラートショップです。 45 お近くにお越しの際は是非お立ち寄り下さい。 46 心からお待ちしております。</p></div> 47 <div class="top_mizu"><h2 class="komidasi">八ヶ岳の天然水</h2> 48 <img class="wakimizu" src="img/mizu.jpeg"> 49 <p>店舗駐車場にて八ヶ岳の天然水が湧き出ております。ご自由にお持ち帰り下さい。</p></div> 50 <img src="img/mizu.jpeg" class="mizutesuto"> 51 <p>テストテスト</p> 52 </article> 53 </div> 54</body> 55</html> 56

css

1@charset "UTF-8"; 2body{margin-left: 0; 3 margin-top: 0;} 4.pinkhako{width: 980px; 5 height: 200px; 6 background-color: pink; 7 margin: 0 auto;} 8header{background-image: url("../img/wood+++.png"); 9 background-repeat: no-repeat; 10 display: flex; 11 justify-content: space-between; 12 height: 120px; 13 position: fixed; 14 top: 0; 15 left: 0; 16 z-index: 1; 17 width: 100%;} 18 19ul{display: flex;} 20.hako{width: 395px; 21 display: grid; 22 grid-template-columns: 90px 120px 100px 100px; 23 font-family: 'Zen Maru Gothic', sans-serif;} 24li{display: flex; 25 align-items: center;} 26a{color: white; 27 text-decoration: none; 28 visited:white; 29 font-size: 19px;} 30.geratorogo{display:flex; 31 align-items: center; 32 width: 200px;} 33h1{margin-left: 0; 34 margin-right: 0;} 35.kazarimoji{font-size: 13px; 36 position:relative; 37 bottom:2px; 38 text-align: center; 39font-family: 'Zilla Slab', serif;} 40.heddanowaku{display: flex; 41 justify-content: space-between; 42 width: 980px; 43 margin: 0 auto;} 44#wrapper{width: 980px; 45 margin: 0 auto;} 46.rogonaosi{width: 120%;} 47.slider{padding-top: 130px;} 48.kakumidasi{font-family: 'Zen Maru Gothic', sans-serif; 49 color: #5a5b5c; 50 font-size: 1.6em;} 51.komidasi{font-family: 'Zen Maru Gothic', sans-serif; 52 color: #5a5b5c; 53 font-size: 26px;} 54p{line-height: 1.7;} 55.baigetunogazo{vertical-align: top; 56 display: block; 57 float: left; 58 padding-right: 10px;} 59.top_mizu{clear:both;} 60

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

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

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

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

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

guest

回答1

0

ベストアンサー

全体への影響は考慮しませんがとりあえず

CSS

1h1,p{margin:0;}

投稿2022/04/27 02:18

yambejp

総合スコア114767

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

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

negiremi

2022/04/27 07:00

h1やpにもマージンがあるんですね!!!助かりましたありがとうございます!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問