ホームページの２つの画像の縦のすき間を無くしたいです。初心者です。やり方を調べてコードを入力しても

解決済

質問者：hayosato
質問日時：2020/01/09 12:36
回答数：5件

ホームページの２つの画像の縦のすき間を無くしたいです。初心者です。
やり方を調べてコードを入力してもすき間がなくなりません。以外コードです。詳しい方コードを書いていただけないでしょうか?

<body>

<p>
<img alt="a" height="907" src="file:///C:/Users/hayao%20sato/Pictures/hp0000/ビジネス01.png" width="1516" />
<img alt="b" height="949" src="file:///C:/Users/hayao%20sato/Pictures/hp0000/ビジネス02.png" width="1516" />

</body>

通報する

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

質問の本文を隠す

回答 (5件)

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

No.2ベストアンサー

回答者： t_fumiaki
回答日時：2020/01/09 14:00

enterキーでの改行を止めて、2個のimgタグを横1行にする。

- 0
- 件

通報する

参考程度に

No.5

回答者： fujillin
回答日時：2020/01/09 15:24

こんにちは

すでに回答は出ていますが・・・

ブラウザは「改行や空白の連続があったら半角空白1個とみなす」というルールでHTMLを解釈しています。
それなので、ソースコードの中の改行が空白とみなされて、ご質問にある隙間となって見えているということになります。
一番簡単な対処法は改行を無くしてしまうことで、すでに他の方が回答なさっている通りです。

それ以外の方法を考えてみると、
　「空白とみなされても、それを無視するレイアウトにしちゃう」　とか
　「あとから、空白となる改行を掃除しちゃう」　などが考えられます。

例えば、前者のレイアウトで解決する方法の一例として・・・
<style type="text/css">
p img { float: left; }
p::after{ content:""; display:block; clear:both; }
</style>
を<head>～</head>間に記述するといった方法が考えられます。

あるいは別のレイアウト法として
<style type="text/css">
p{ display:flex; flex-wrap:wrap; }
</style>
でも良いかも知れません。

これらはレイアウトの方法を指定しているものなので、上記の記述のままだと、場合によっては他の部分に影響が出てしまうかも知れません。（あくまでも方法の例なので）
正しく指定しさえすれば、目的の部分に正しく適用することは可能です。
詳しくはCSS（Cascading Style Sheets) について調べてみてください。