4

画像を縦に並べて配置しています。それらを互いに押しつぶしたいのですが、それらの間に空白行ができています。この行を取り除くにはどうすればよいですか? margin=0px にしてみました。また、それらをdivに入れないようにしました。

（下の画像はW3エディタのものです）

<div>
    <img border="0" src="/images/pulpit.jpg" width="304" height="228" style = "margin:0px;">
</div>
<div>
    <img border="0" src="/images/pulpit.jpg" width="304" height="228" style = "margin:0px;">
</div>
4

2 に答える 2

6

css プロパティを追加するdisplay:blockとうまくいくはずです。また、パディングとマージンを削除して、他のスタイリングを排除しました。すべてのスタイリングは、インラインではなく CSS ブロックに移動する必要があります。

img {
  padding: 0;
  margin: 0;
  display: block;
}
<div>
  <img border="0" src="https://dummyimage.com/200x100/1ff/100">
</div>
<div>
  <img border="0" src="https://dummyimage.com/200x100/100/1ff">
</div>

于 2013-01-29T10:23:08.347 に答える
1

これを行う。テーブルを使用して画像を表示している場合に機能します。

<style type="text/css">

table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table tr,
table td
{
padding:0;
}
</style>

<table>
<tr>
<td>
<img src="side1.jpg" />

</td>
</tr>
<tr>
<td>    
<img src="side2.jpg" />
</td>
</tr>
</table>

垂直および水平の画像のどちらでも機能します。パズルのように。よろしく。

于 2013-06-10T11:41:20.493 に答える