iPentec.com / Document / カテゴリ: HTML / タグ: CSS CSS margin

aタグ(<a>)でmargin,paddingが無視される

<a>タグでmargin,paddingスタイルが効かない動作について紹介します。

概要

aタグはインライン要素なのでそのままでは、margin,paddingスタイルは有効になりません。
margin, paddingを有効にしたい場合は、display:block; スタイルを指定し、インライン要素をブロック化することでmargin,paddingスタイルを有効にできます。

補足

display:block; を指定するとブロック要素となり、デフォルトの動作では、ブロックの終了で改行される表示になります。ブロック要素で改行をしたくない場合は、 display:inline-block;を利用する方法があります。詳しくはこちらの記事を参照してください。

コード例

HTML

<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>

CSS

.TopBarLogo
{
    padding-left:16px;
    padding-top:16px;
}

上記のの場合は、ロゴのPaddingが有効になりません。画像が上に詰まって表示されてしまいます。
CSSファイルを下記に修正することでmargin, paddingが有効になります。

CSS修正

.TopBarLogo
{
    display:block;
    padding-left:16px;
    padding-top:16px;
}

実装例1

コード

下記のHTML, CSSファイルを作成します。

HTML

<!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>

anchor-simple-01.css

.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の表示は下図です。

参考:inline-blockを利用した場合の表示

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の表示は下図です。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

作成日: 2009-10-01

目次