3

私は HTML5 を初めて使用します。HTML5 で画像を処理するというこの概念を理解しようとしています。これを参照してください http://mavintophospital.com/test/test.html

例 1: 画像間に余白やパディングを追加していませんが、デフォルトではブラウザーは画像間に 5px のスペース/ギャップを追加します

例 2: 画像自体の幅が高すぎるため、上下に配置されますが、ここではブラウザーはスペースを追加しません。

なぜこうなった？

これは私が達成したいものです: http://mavintophospital.com/test/test1.html
ここで私はそれを与えることによって画像を滑らかにしましたが、画像の下部にwidth: 100% あるスペース/ギャップがブラウザによってコンテナに追加されます。5px

削除したいです。

絶対位置を指定しようとしましたが、めちゃくちゃです。

<!DOCTYPE html>これはすべて、 HTML5 doctypeを使用した場合にのみ発生します

4

3 に答える 3

7

あなたの最初の質問は空白で答えられます。変化する

<img alt="Some thing about Coral JQM" src="test_files/red0.png">
<img alt="Some thing about Coral JQM" src="test_files/red0.png">
<img alt="Some thing about Coral JQM" src="test_files/red0.png">

1行に

<img alt="Some thing about Coral JQM" src="test_files/red0.png"><img alt="Some thing about Coral JQM" src="test_files/red0.png"><img alt="Some thing about Coral JQM" src="test_files/red0.png">

2 番目の質問では、vertical-align スタイルを上に設定します。

<div style="background: #ff0">
    <img style="width: 100%; vertical-align:top;" alt="Some thing about Coral JQM" src="test1_files/red.png">
</div>
于 2013-10-11T16:34:31.263 に答える
5

画像はインライン要素のようにレンダリングされるため、空白の影響を受けやすく、下部にディセンダー テキスト要素 (j、g、y など) 用に確保されたギャップがあります。単純に要素をコード内で隣り合わせにプッシュするか、要素間に HTML コメントを配置して (例: <img><!-- --><img>)、画像間の空白を削除します。画像の下の隙間をなくすには、vertical-alignプロパティを top に設定します。デフォルトはベースラインです。

jsFiddle の例(vertical-align:top)

jsFiddle の例(空白を削除し、vertical-align:top)

于 2013-10-11T16:34:46.633 に答える