ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

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

  • mixiチェック
  • このエントリーをはてなブックマークに追加
添付をした写真2枚を見て頂きたいと思います。
2枚目をみて頂くとわかりやすいと思うのですが、

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

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

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

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

コメント(31)

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

私のパソコンのブラウザは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;
}
 まず、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(改行)
…以下略

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

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

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

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

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

ありがとうございました。
↑こうであっても発生します。

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

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

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

あとついでに、CSSのブラウザ別バグリストのサイトがあるので検索してみると今後つまずいたときに良いかもです。
>ひーちゃんさん
まずスミマセン、訂正から。
virtual-align(←ハイフン入ります。
コピペであまり教えない派ですみませんね、独学派なもので…(汗
理屈はjugyさんと全く同じです。ただ…スペルがちょっと違うと思われる。

virtual-align:top(かbottomなど);
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"

と記入しましたが改善にいたりませんでした。
↑スイマセン。

先ほどのカキコミ消しましたヽ(`Д´)ノ
私の記入ミスでちゃんと入力するとできました。
>junyさん
そうでしたか…すみません。。失礼しました。
最近タグ打ちでないので忘れてしまったようです。
不快な思いをさせてしまいまして大変失礼しました…m(_ _)m
何か物凄い勢いでレスがついてますね。
vertical-alignで解決しているみたいですね。
私の環境でも検証してみました。
juny様

ぃぇ。まだ上手くいっていません。
15のカキコミを今から試して見たいと思います。

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

は8のカキコミをご覧下さい。

りょうじ様

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

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

可能な方もう少し詳しく知りたいと思っています。
18のカキコミをみてください。
 24のカキコは、私の勘違いです。すんません。

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

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

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

#box_1 img {
vertical-align : top;
}

#box_2 img {
vertical-align : top;
}

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

良ければ足跡も暇なときに踏んづけにきてやってください。
あにゃ?
何か、私は、余計なことを言ってしまったような気が・・・。
まぁ、解決したようで何よりです。
はてな様

とんでもない!ソース表示やルールを知らせてくれたことに
少なくても僕は大いに感謝しています。

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

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

mixiユーザー
ログインしてコメントしよう!

独学で学ぶWebスキル/テクニック 更新情報

独学で学ぶWebスキル/テクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング