ブラウザの初期スタイルのリセット *margin: 0;を一部の画像のみに適応したい。

実現したいこと
付属画像の一番下に位置している、青い画像（ボックスではない）の下の余白を完全になくしたいのですが、余白の原因を調べたらどうやらブラウザの初期スタイルが原因でした。

この初期スタイルによる余白を無くしたいです。ただし、青い画像だけ。

付属画像１
![

付属画像２追加　米印を取った場合

付属画像３　*{margin: 0;}を<style type="text/css">タグ内に追加の場合

試したこと。
提示しているHTMLのコードの<style type="text/css">のタグ内に*{margin0}を追加すると解決するのですが、ただ、この方法だと、すべて*{margin0}が適応されて、入力フォームのレイアウトも崩れてしまうため、青い画像のみに*{margin0}を適応できないかと
、img.example11{
*margin: 0;
*padding: 0;
を個別に追加してみても変化なし。
.center2{
*margin: 0;
*padding: 0;
にも同じく追加してみても変化なし。

両方同時に追加しても、ブラウザの初期スタイルがリセットされません。
途方に暮れています。

senden30.pngが青い画像です。

html
1<!DOCTYPE html> 
2
3<html>
4
5<head>
6<meta content="text/html; charset=utf-8"/>
7<meta name="viewport" content="width=device-width, initial-scale=1">
8 <title></title> 
9 <link rel="stylesheet" href="senden.css"> 
10
11
12<style type="text/css">
13/* 入力フォームの位置 */
14
15.auto-style1 {
16
17text-align: center;
18
19}
20/* セレクトボックスの位置 */
21.auto-style2 {
22
23text-align: center;
24/* セレクトボックス中央に配置 */
25
26}
27</style>
28
29</head>
30<body>
31 <form action="form1.php" method="post">
32
33            <div class="auto-style2">
34                
35                <p class="tel-titile">
36                    選択する：※
37                </p>
38    
39                
40    
41                    <span class="selectbox">
42                <select id="plan" class="plan" name="plan">
43                    <option value="">選択</option>
44  </select>
45            </span>
46            </div>
47
48 <div class="auto-style1">
49
50                <p class="tel-titile">
51                    会員番号：※
52                </p>
53                <input type="text" class="bangou" name="bangou" id="bangou" value="" />
54
55    
56                <p class="tel-titile">
57                    名前：※
58                </p>
59                <input type="text" class="name" name="name" id="name" value="" />
60    
61                <p class="tel-titile">
62                    フリガナ：※
63                </p>
64                 <input type="text" class="gurigana" name="furigana" id="furigana" value="" />
65</div>
66
67 <!--画像調節可能にするためimg内にclassを作る-->   
68 <div class="center2"><!--画像中央寄せのためdivで囲む-->  
69    <p><img src="senden30.png" alt="［写真］" class="example11"> </p>   
70   </div>
71
72
73</body>
74</html> 
75

css
1/* 画像中央配置 */  
2.center{
3  text-align: center;
4}
5
6/* セレクトボックスのデザイン */
7#plan{
8vertical-align: middle;
9box-sizing: border-box;
10border: 3px solid #63e02d;  /* 枠線 */
11background-color: snow;  /* 背景色 */
12width: 27.1em;             /* 横幅 */
13height: 53px;           /* 高さ */
14font-size: 1.0em;          /* テキスト内の表示文字サイズ */
15color: #000000;
16line-height: 1.2;  /* 行の高さ */
17
18}
19
20
21/* 入力フォームのスタイル */    
22#bangou {
23  
24      border: 3px solid #63e02d;  /* 枠線 */
25      padding: 0.5em;          /* 内側の余白量 */
26      background-color: snow;  /* 背景色 */
27      width: 25.5em;             /* 横幅 */
28      height: 30px;           /* 高さ */
29      font-size: 1em;          /* テキスト内の表示文字サイズ */
30      line-height: 1.2;         /* 行の高さ */
31    
32    }
33  
34#name {
35  
36  border: 3px solid #63e02d;  /* 枠線 */
37  padding: 0.5em;          /* 内側の余白量 */
38  background-color: snow;  /* 背景色 */
39  width: 25.5em;             /* 横幅 */
40  height: 30px;           /* 高さ */
41  font-size: 1em;          /* テキスト内の表示文字サイズ */
42  line-height: 1.2;         /* 行の高さ */
43
44}
45
46#furigana {
47  
48  border: 3px solid #63e02d;  /* 枠線 */
49  padding: 0.5em;          /* 内側の余白量 */
50  background-color: snow;  /* 背景色 */
51  width: 25.5em;             /* 横幅 */
52  height: 30px;           /* 高さ */
53  font-size: 1em;          /* テキスト内の表示文字サイズ */
54  line-height: 1.2;        /* 行の高さ */
55  
56}
57/* フォームの位置の調節、お申し込みフォームの文字から丁度いい位置に配置するため， */
58form{margin-top: 70px;
59}
60
61
62
63
64/* 入力フォームとフォーム間の上下の余白， */
65
66input.name{margin:8px 0px;}
67input.furigana{margin:8px 0px;}
68input.tel{margin:8px 0px;}
69input.email{margin:8px 0px;}
70input.lineid{margin:8px 0px;}
71
72/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
73.tel-titile{
74  line-height: 0px;/* 文字の行間 */
75  font-size: 22px;/* 文字の大さ */
76  font-weight: 900;/* 文字の太さ */
77  text-align: center;/* 文字を中央に配置 */
78  color: #63e02d;
79}
80
81
82/* 画像の大きさ調節 */
83img.example11{
84  *margin: 0;
85  *padding: 0;
86  width: 100%;
87  height: 106px;
88 margin-top: 150px;
89 vertical-align: bottom;/* ブラウザによる一番したすき余白開けないため、ｓｔｙｌの｛margin：0;とセット */
90 margin-bottom: 0%;
91}
92
93/* 画像中央配置 */  
94.center2{
95  /* ブラウザによる余白を無くす*/ 
96  *margin: 0;
97  *padding: 0;
98  text-align: center;
99  
100}

maisumakun

2021/06/25 09:02

「*margin: 0;」とありますが、本当にそう書いているのですか？

gujhufiugho

2021/06/25 09:04

回答ありがとうございます。書いております。

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

回答2件

書いております。

*margin: 0;は、文法的に成立しない書き方です（大昔のIEを狙ったCSSハックであえて書くこともありましたが、現代には不要です）。先頭の*は不要です。

投稿2021/06/25 09:05

編集2021/06/25 09:11

maisumakun

総合スコア145208

gujhufiugho

2021/06/25 09:20

回答ありがとうございます。 img.example11{ margin: 0; padding: 0; width: 100%; } .center2{ margin: 0; padding: 0; text-align: center; } *の米印けしても、ほんの少し余白が空いてしまいます。　付属画像２　付属画像３

gujhufiugho

2021/06/25 09:25

付属３はできていません。

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

自己解決

*リットｃｓｓ Eric Meyer’s “Reset CSS” 2.0一部だけ /
/
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

を追加して治りました。

投稿2021/06/26 08:23

gujhufiugho

総合スコア245