-
ID:0IXz1c さんの質問

HTMLについて質問です。初心者です。
divのborderの有無で子要素のaタグの挙動が変わってしまいます。なぜでしょうか。
ガイド用としてborderをつけていましたが最終的には外す予定なので、borderのない状態でaタグをdivの影響下に指定したいです。方法を教えて頂きたいです。以下、ソースになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#Title
{
width: 230px;
height: 60px;
margin: 20px 15px 0 15px;
border:dotted 1px #cccccc;
background-color: #f8ffff;
}
div#Title2
{
width: 230px;
height: 60px;
margin: 20px 15px 0 15px;
// border:dotted 1px #cccccc;
background-color: #f8ffff;
}
#Title a
{
display:block; /* ブロック要素にしているので縦位置は数値指定 */
margin-top: 15px;
width:230px;
height: 30px;
line-height:30px;
text-align:center;
}
</style>
</head>
<body>
<div id="Title">
<a>○○</a>
</div>
<div id="Title2">
<a>○○</a>
</div>
</body>
</html>

みんなの回答 5 件

ID:R83uxC さんの回答

確認しているブラウザと「挙動が変わる」の内容を書こうよ?

ID:0IXz1c

ご指摘ありがとうございます。以後、情報の記述に配慮して質問させていただきます。

ID:moCloe さんの回答

ヒント:マージンの相殺・継承
解決方法:inline-block

ブラウザの要素の検証で基本を確認しやがれ!このタコ野郎が!

ID:0IXz1c

厳しい言葉の中にも適切な回答感謝致します。親要素でborderを使うとmarginの相殺が起こらなくなるのですね。勉強不足でした。

ID:IRgl2t さんの回答

あと「aタグの挙動が変わる」は間違いで「a要素(a element)の挙動が変わる」が正しいからね
(ドヤァ)

ID:0IXz1c

承知しました。ご指摘ありがとうございます。

ID:vjKQKG さんの回答

ガイド用ならborderよりoutlineがいいよ(・∀・)

ID:0IXz1c

ありがとうございます。以後、確認用にはoutlineを使うようにします。

ID:vjKQKG

うむ(・∀・)サイズに影響しないからね!
あとはborder-boxを使う手もあるね、でも今までやった設計全部に影響しちゃうからこれは最初からそーするのがいいね(・∀・)

ID:vjKQKG

あ、したの人が答えてたねw失礼!

ID:AvRDOK さんの回答

さっぱり全容がつかめないけど、これでどう?

#Title,#Title2{
border:dotted 1px #cccccc;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

あと、classを覚えようね。。

ID:0IXz1c

回答ありがとうございます。説明不足で分かりにくい質問でした。今回は上記の”inline-block”で解決しました。が、box-sizingというプロパティは知りませんでしたので、勉強になりました。

最終更新日:2014-05-24 (2,115 views)

関連するトピックス

ページ上部に戻る