画像の余白の削除の方法

home2.pngの左側に少しだけ隙間が空いています。どうしたら治せるでしょうか？

<body>

<style>

* {
    margin: 0px;
    padding: 0px;
}


.header {
   width: 100%;
   height: auto;
 }


.font1 {
    font-size: 20px;
    font-family: "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif";
}

.center{
     border: 1px solid #aaa;
     width: 400px;
     text-align: center;
}

.center1 {
  width: 100%;
  height: auto;
  text-align:center;
}

.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    padding:  0px;             /* 余白指定 */
    height: 100px;              /* 高さ指定 */
}

.parent {
    display: flex;
}
.parent img {
    width: 100%;
}

 .movie {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; /* 現プレイヤーでは不要？ */
    height: 0;
    overflow: hidden;
}
 
.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.centermov { 
 text-align:center;
}

.through:hover {
 opacity: 0.5;
}

.imgo {
line-height: 0;
}



</style>

  <body bgcolor="CCFF99">
  <div class="imgo">
    <header>
      <img src="figure1.png" class="header" alt="" />
    </header>
    
  <div class="parent">
 　  <div class="inline-block_test through">
    　 <a href="index.html"><img src="home2.png" alt="" width="" height=""/></a>
         </div>
     <div class="inline-block_test through">
    　 <a href="katudousyoukai.html"><img src="katudousyoukai.png" alt="" width="" height=""/></a>
         </div>
     <div class="inline-block_test through">
    　 <a href="https://www.google.com/intl/ja_jp/forms/about/"><img src="mousikomi.png" alt="" width="" height=""/></a>
         </div>
     <div class="inline-block_test through">
    　 <a href="mailpage.html"><img src="toiawase.png" alt="" width="" height=""/></a>
         </div>
  </div>
  </div>
   
  <div class="box1">
    <h2><big><font face="sans-serif">ホーム</font></big></h2>
      </div>
      
  <div class="centermov movie">
    <iframe width=480px height=270px src="https://www.youtube.com/embed/0VSyee24ZGE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
  

  
 
</body>
コード

m.ts10806

2019/08/07 01:30

bodyタグは実際のコードにも2つ入っているのでしょうか。

m.ts10806

2019/08/07 01:32

あとHTML5では廃止になった要素を多く使われているように見受けられます。 https://www.tagindex.com/html5/basic/abolished.html ブラウザがうまいこと拾ってくれているだけで本来は使えない機能ですので、差し替えましょう。

nokota

2019/08/07 01:46

コピペで独学している状態なので、新旧があるということを教えていただけて助かります。bodyタグも、コピペでやったので、このような感じになっております。ありがとうございます

m.ts10806

2019/08/07 01:46

一冊本買ったほうがいいかもしれませんね（なるべくHTML5対応で新しいもの）

行動規範の内容に同意します

回答2件

余計な全角スペースが原因だと思われます。
可視化できるエディタやフォントを使うことをお勧めします。

投稿2019/08/07 00:28

dit.

総合スコア3235

ベストアンサー

PHP
1  <div class="parent">
2 　  <div class="inline-block_test through">

の下のdivの前に全角スペースが入っています。

投稿2019/08/07 00:31

yambejp

総合スコア114827

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

画像の余白の削除の方法

関連した質問