More than 5 years have passed since last update.

<a>aタグにpaddingやmarginが効かない</a>

Posted at 2019-04-30

###はじめに
初学者のアウトプット備忘録記事です。
ご指摘アドバイスありましたらお願いします。

##aタグにpaddingやmarginが効かない件

スクールの課題でビュー画面作成していたのですが、cssにてa要素に対してpaddingが効きませんでした。
他にもmarginも効きませんでした。

<div class="body">
  <div class="main">
    <a class="content" >
      コンテンツ
    </a>
  </div>
</div>


.content {
  padding: 30px;
}

これだとpaddingが効きません。

原因としてはaタグがインライン要素のためにmargin,paddingが効かないようです。
なのでインライン要素をブロック要素化することでpadding,marginが効くようになります。

.content {
  display: block;
  padding: 40px;
}

これでpaddingが効くようになります。

ちなみに自分はaタグをdivタグに変更しブロック要素に変更してpaddingを効かせました。

<div class="body">
  <div class="main">
    <div class="content" >
      コンテンツ
    </div>
  </div>
</div>

これでも大丈夫でした。

###参考

こちらの記事を参考にしました。