0

印刷可能な証明書を作成しています。背景画像はデフォルトで有効になっていないので、imgタグを配置して境界線を作成しています。

何らかの理由で、imgタグの間に数ピクセルのギャップがあります...

jsfiddle

4

5 に答える 5

4

画像をブロック要素にするだけです:

img { display: block; }

そしてそれはすべて一致します。Xaviが言ったように、画像はデフォルトでインライン要素であるため、改行からそこに空白が入っています。もちろん、他の画像が含まれる場合は、セレクターを改良する必要があります。

于 2012-10-02T04:40:14.217 に答える
3

position: relative;ギャップを埋めるために画像をシフトするために使用します

#bottom_border{
   position: relative; 
   bottom: 5px;
 }

#top_border{
   position: relative; 
   top: 5px;
 }

私のフィドル

于 2012-10-02T04:34:29.650 に答える
3

Vertical-alignあなた#top_borderと#bottom_borderとして設定

#top_border{ vertical-align:bottom}
#bottom_border{vertical-align:top}

ここでフィドル

于 2012-10-02T04:42:17.417 に答える
1

追加

#certificate img { display: block; }

cssの終わりまで

于 2012-10-02T04:50:06.290 に答える
1

に追加font-size: 0してみてください#certificate。表示されるギャップは、実際にはスペース (文字) です。フォント サイズを 0 に設定するのはちょっとしたハックであることは十分に認めます。幸いなことに、css3の空白規則text-space-collapse: collapseが完全にサポートされている場合は、代わりに使用できます。

于 2012-10-02T04:35:12.907 に答える