独学で学ぶWebスキル/テクニックコミュの画像の下にできるmargin？

添付をした写真2枚を見て頂きたいと思います。
2枚目をみて頂くとわかりやすいと思うのですが、

CSSでBoxを作り、そこにBoxｻｲｽﾞより上下左右2px
小さい画像をつけます(Boxの線をはぶいた大きさ)

しかし指定したBoxの大きさより下に3pxほどBoxが広がってしまいます。
またﾒﾆｭｰ？の場合のように画像を並べたところ
画像同士の間にも小さな余白ができてしまいます。

この(画像の)余白をいっぺんになくす方法はありますか？
もしくはそれぞれに要素を指定することによって
この不必要なmargin？を消すことは可能でしょうか？

お分かりになる方教えてください♪

コメント(31)

最初
全て
最新の40件

[1] mixiユーザー 06月21日 01:44

こういう質問をするときは、元ソースを出しましょう。
ちなみに、ユニバーサルセレクタによるmargin,paddingのリセットは、試してみましたか？

[2] mixiユーザー 06月21日 01:54

はぃ。ｽｲﾏｾﾝでした。
ﾕﾆﾊﾞｰｻﾙｾﾚｸﾀを試してみたのですが、できませんでした。

私のﾊﾟｿｺﾝのﾌﾞﾗｳｻﾞはIE7です。

----- html -----
<html>

<head>

<title>L'Endroit @ Splendide</title>

<link rel="stylesheet" type="text/css" href="base.css">

</head>

<body>

<div id="box_1">

<img src="logo.gif" border="0" width="748" height="95">

</div>

<div id="box_2">

<a href="#"><img src="top1.gif" border="0" width="105" height="25"></a>
<a href="#"><img src="line.gif" border="0" width="12" height="25"></a>
<a href="#"><img src="profile1.gif" border="0" width="105" height="25"></a>
<a href="#"><img src="line.gif" border="0" width="12" height="25"></a>
<a href="#"><img src="computer1.gif" border="0" width="103" height="25"></a>

</div>

<div id="box_3">789</div>

<div id="box_4">456</div>

<div id="box_5">123</div>

</body>

</html>

----- CSS -----
#box_1 {
width : 750px;
height : 100px;
border : 1px #aaaaaa solid;
margin : 10px 0px 0px 10px;
}

#box_2 {
width : 750px;
height : 30px;
border : 1px #aaaaaa solid;
margin : 10px 0px 0px 10px;
}

#box_3 {
width : 450px;
height : 200px;
border : 1px #aaaaaa solid;
margin : 10px 0px 10px 10px;
}

#box_4 {
width : 290px;
height : 200px;
border : 1px #aaaaaa solid;
position : absolute;
top : 160px;
left : 470px;
}

#box_5 {
width : 750px;
height : 200px;
border : 1px #aaaaaa solid;
margin : 0px 0px 0px 10px;
}

[4] mixiユーザー 06月21日 02:46

　まず、box_1とbox_2についてですが。

　divの枠線が1pxなら、
【画像の高さ＋上の枠線＋下の枠線＝divのheight】
となるのではありませんか？
　計算違いをなされているようですよ。

　次に、メニュー画像間の余白について。

<img src="">(改行)
<img src="">(改行)

という書き方だと、画像同士の間に隙間が生じます。

ですから、改行は別の箇所で行ないます。例えば、

<img src=""><img(改行)
src="">

といった感じに。。。

今回の例では、

<a href=""><img src=""></a><a(改行)
href=""><img src=""></a><a(改行)
…以下略

といった感じになりますかね。

[7] mixiユーザー 06月21日 02:58

kimiyo様

Box_2の左右の余白は消えましたが、
それ以外の下にできてしまう余白は改善できませんでした。

[8] mixiユーザー 06月21日 03:01

はてな様

box_1･box_2に関して。
上記に記載したﾀｸﾞはどうしてもできてしまう余白(上下)
の3pxを考えて設定したものになります。

box_1の場合高さを100pxにしたいので、画像を98pxにしましたが、
3xp大きくなってしまい、box_1が103pxになるので
あえて画像を95pxにしてどうしてもできてしまう3pxを無効？
な状態にしています。仮に画像を98pxにしても余白の3pxは発生してしまいます。

Box_2も同上です。Box_2の左右の余白は、はてな様の言うと通り改善できました。

ありがとうございました。

[9] mixiユーザー 06月21日 03:05

↑こうであっても発生します。

----- html -----
<html>

～省略～

<div id="box_1">

<img src="logo.gif" border="0" width="748" height="98">

</div>

<div id="box_2">

<a href="#"><img src="top1.gif" border="0" width="105" height="28"></a>
<a href="#"><img src="line.gif" border="0" width="12" height="28"></a>
<a href="#"><img src="profile1.gif" border="0" width="105" height="28"></a>
<a href="#"><img src="line.gif" border="0" width="12" height="28"></a>
<a href="#"><img src="computer1.gif" border="0" width="103" height="28"></a>

</div>

～省略～

</html>

SCCに関してはそのままです。

[11] mixiユーザー 06月21日 03:14

下の空白の件、何かのサイトで見たのでうろ覚えですが、
virtualalignの値がベースライン(文字のライン)になっているため空白が出来る
と言った記事を見たことがあります。
その場合は、virtualalignの値をbaseline以外にすると直るようです。

私は今携帯から見ていて確認はしていませんので的外れな場合失礼しました。

それから、IEは結構バグだらけなので(7は多少改善されているようですが)他のブラウザからも確認してみると何が原因なのか理解しやすくなると思います。

あとついでに、CSSのブラウザ別バグリストのサイトがあるので検索してみると今後つまずいたときに良いかもです。

[13] mixiユーザー 06月21日 03:17

virtual-align

[16] mixiユーザー 06月21日 03:27

>ひーちゃんさん
まずスミマセン、訂正から。
virtual-align(←ハイフン入ります。
コピペであまり教えない派ですみませんね、独学派なもので…(汗
理屈はjugyさんと全く同じです。ただ…スペルがちょっと違うと思われる。

virtual-align:top(かbottomなど);

[18] mixiユーザー 06月21日 03:35

juny様&凛々朱様

お二方の意見を参考に要素に直接指定をしてみました。

<img src="logo.gif" width="748" height="95" style="vertical-align : top">

こんな感じです。Box_1に関して上手くできました。しかし、

#box_1 {
width : 750px;
height : 100px;
border : 1px #aaaaaa solid;
margin : 10px 0px 0px 10px;
vertical-align : top；
}

CSSに上記のように入力をしても上手くいきません。
これは僕の単なる間違えでしょうか？

もう一つはBox_2です。以下のように5つの物に直接

<a href="#"><img src="top1.gif" border="0" width="105" height="25"></a>

(↑5つの物)

style="vertical-align : top"

と記入しましたが改善にいたりませんでした。

[19] mixiユーザー 06月21日 03:37

↑ｽｲﾏｾﾝ。

先ほどのｶｷｺﾐ消しましたヽ(`Д´)ﾉ
私の記入ﾐｽでちゃんと入力するとできました。

[20] mixiユーザー 06月21日 03:38

>junyさん
そうでしたか…すみません。。失礼しました。
最近タグ打ちでないので忘れてしまったようです。
不快な思いをさせてしまいまして大変失礼しました…m(_ _)m

[24] mixiユーザー 06月21日 03:46

何か物凄い勢いでレスがついてますね。
vertical-alignで解決しているみたいですね。
私の環境でも検証してみました。

[25] mixiユーザー 06月21日 03:46

juny様

ぃぇ。まだ上手くいっていません。
15のｶｷｺﾐを今から試して見たいと思います。

>ちょっと気になったのですが

は8のｶｷｺﾐをご覧下さい。

りょうじ様

はっ！っとかなり参考になりました。
しかし…。ここはCSSで踏ん張ってみたいとおもいます。
ありがとうございます。もぉ！わけ若布の際には使います。

[26] mixiユーザー 06月21日 03:48

はてな様

はぃ。かなり感謝です。
夜遅いのに皆様本当に感謝します。ありがとうございます。

可能な方もう少し詳しく知りたいと思っています。
18のｶｷｺﾐをみてください。

[28] mixiユーザー 06月21日 03:55

　24のカキコは、私の勘違いです。すんません。

　IEのバグで、BOX内にposition指定した要素を複数配置すると、それらを縦に並べたときと同様の余白ができる、といった感じのものがあります。
　その解決手段として、overflow:hidden;を適用するというテクニックがあります。

　これを応用して、box_1とbox_2に、overflow:hidden;を指定すると、解決しました。
　画像の高さは、各々98と28でいけそうです。

[29] mixiユーザー 06月21日 03:59

はてな様･kimiyo様･juny様･凛々朱様･りょうじ様

先ほど僕の手違いで…。入力ﾐｽをかましていたようです。
初の質問、猛烈なﾚｽにともないご入力。(言い訳ちゃうで…。)
以下のCSSで解決することができました。

#box_1 img {
vertical-align : top;
}

#box_2 img {
vertical-align : top;
}

こんな遅くまで手助けをしてくれた皆に祝福がありますように。
どうしてもわからない事があった場合、色々とﾄﾋﾟを立てると思いますが、
その際もお手柔らかによろしくお願いします。本当に勉強になりました。

良ければ足跡も暇なときに踏んづけにきてやってください。

[30] mixiユーザー 06月21日 04:10

あにゃ？
何か、私は、余計なことを言ってしまったような気が・・・。
まぁ、解決したようで何よりです。

[31] mixiユーザー 06月21日 04:14

はてな様

とんでもない！ｿｰｽ表示やﾙｰﾙを知らせてくれたことに
少なくても僕は大いに感謝しています。

もしかするととんでもない輩に怒られてたかもしれません。
感謝です(*゜∀゜)

ログインすると、残り12件のコメントが見れるよ