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 件
確認しているブラウザと「挙動が変わる」の内容を書こうよ?
ヒント:マージンの相殺・継承
解決方法:inline-block
ブラウザの要素の検証で基本を確認しやがれ!このタコ野郎が!
あと「aタグの挙動が変わる」は間違いで「a要素(a element)の挙動が変わる」が正しいからね
(ドヤァ)
ガイド用ならborderよりoutlineがいいよ(・∀・)
さっぱり全容がつかめないけど、これでどう?
#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を覚えようね。。
関連するトピックス