<a>タグでmargin,paddingスタイルが効かない動作について紹介します。
aタグはインライン要素なのでそのままでは、margin,paddingスタイルは有効になりません。
margin, paddingを有効にしたい場合は、display:block;
スタイルを指定し、インライン要素をブロック化することでmargin,paddingスタイルを有効にできます。
<div class="Container">
<div id="TopBar">
<a id="TopBarLogo" class="TopBarLogo" href="http://www.ipentec.com">
<img src="logo.png" alt="HyperLink" style="border-width:0px;" />
</a>
</div>
</div>
.TopBarLogo
{
padding-left:16px;
padding-top:16px;
}
上記のの場合は、ロゴのPaddingが有効になりません。画像が上に詰まって表示されてしまいます。
CSSファイルを下記に修正することでmargin, paddingが有効になります。
.TopBarLogo
{
display:block;
padding-left:16px;
padding-top:16px;
}
下記のHTML, CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="anchor-simple-01.css" />
</head>
<body>
<h1>aタグのmargin, paddingのデモ</h1>
<div>文字列、テキストテキスト、文字列、テキストテキスト、文字列、テキストテキスト</div>
<div>
<a class="link1" href="http://www.ipentec.com">リンク1です</a>
<a class="link2" href="http://www.ipentec.com">リンク2です</a>
<a class="link3" href="http://www.ipentec.com">リンク3です</a>
</div>
<div>文字列、テキストテキスト、文字列、テキストテキスト、文字列、テキストテキスト</div>
</body>
</html>
.link1 {
}
.link2 {
margin: 2rem 2rem 2rem 2rem;
}
.link3 {
padding: 2rem 2rem 2rem 2rem;
}
aタグのリンクを3つページに配置します。1つには、margin もう1つには、padding を設定しています。
上記のコードをWebブラウザで表示します。下図のページが表示されます。
左右のmargin, paddingはリンクに反映されていますが、上下のmargin, paddingがリンクに反映されていないことがわかります。
領域のborderを表示すると、上下のテキストに重なっていることがわかります。
.link2 {
margin: 2rem 2rem 2rem 2rem;
border:1px solid #ff6a00;
}
.link3 {
padding: 2rem 2rem 2rem 2rem;
border: 1px solid #34b444;
}
CSSファイルを以下に変更します。
.link1 {
}
.link2 {
display: block;
margin: 2rem 2rem 2rem 2rem;
}
.link3 {
display: block;
padding: 2rem 2rem 2rem 2rem;
}
修正後の表示は下図になります。上下のmargin,paddingが反映されています。aタグ1つごとに改行されて表示されていることが確認できます。
borderの表示は下図です。
CSSファイルを下記に変更してinline-blockを利用した場合の表示です。
.link1 {
}
.link2 {
display: inline-block;
margin: 2rem 2rem 2rem 2rem;
}
.link3 {
display: inline-block;
padding: 2rem 2rem 2rem 2rem;
}
修正後の表示は下図になります。上下のmargin,paddingが反映されています。aタグごとに改行されていないことがわかります。
borderの表示は下図です。