ホームページの一番下に配置した画像の下の隙間を無くしたいです。付属画像のように青い画像を配置したので

解決済

質問者：pjdmgam
質問日時：2021/06/24 12:39
回答数：2件

ホームページの一番下に配置した画像の下の隙間を無くしたいです。付属画像のように青い画像を配置したのですが、どうしても下に隙間が少し空いてしまいます。この隙間を無くしたいです。
img.example11{ vertical-align: bottom;や margin-bottom: 0%;を追加したも治りません。

困っています。回答よろしくお願いいたします。。

コードは以下です。

<!DOCTYPE html>

<html>

<head>
<meta content="text/html; charset=utf-8"/>

<title></title>

<style type="text/css">

/* 送信ボタンの大きさ、スタイル */
.auto-style4 {

margin-top:74px ;/* 画像の上の余白 */
height: 230px;
width: 830px;
padding: 0;
}
/* 画像中央配置 */
.center{
text-align: center;
}
/* ボタン代替え画像の大きさ調節 */
img.example8 {
width: 100%;/* ボタン枠に収める */
height: 100%;/* ボタン枠に収める */

}

/* HPの一番下に配置する画像のスタイル調節 */
img.example11{

width: 100%;
height: 106px;
margin-top: 700px;
vertical-align: bottom;
}
</style>

</head>
<body>
<div class="enter">

<button type="submit" name ="submit" class="auto-style4" >
<img src="senden15.png" alt="確認画面へ" class="example8"/></button>
</div>


<div class="center">
<p><img src="senden30.png" alt="［写真］" class="example11"> </p>
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： naokita
回答日時：2021/06/24 13:09

bodyやpにもデフォルトのスペースがあるんです。

それをリセットで、０にしないと隙間が出来ますよ・・・

imgだけをどうこうしても無駄で、
img外のブロック要素が影響するでしょ・・・

個別対応でも良いけど、今回は、bodyも関係してそうだから、
body , p , h1 , h2 , h3 , ul , ol , li{margin:0; padding:0;}
こんな感じで、リセットしておき、
スペースを作りたい場合には、個別にmarginやpaddingを設定する。

-----------------------------
というか、
body直前のコンテンツだと、
コンテンツの縦幅が少ない場合には、ブラウザの縦の長さで表示されるので、勝手にスペースが出来るし、
コンテンツが膨大な場合には、ブラウザから消えるし
（その事実は把握しているのだとうか？）