HTMLリンクを正しく埋め込む方法は？

私は、このHTMLとCSSのコードを持っている：HTMLリンクを正しく埋め込む方法は？

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <style> 
      div.container{ 
       border: 1px solid #F00; 
      } 
      a.padded 
      { 
       font-size: 14px; 
       font-weight: bold; 
       text-decoration: none; 
       background-color: #F0F0F0; 
       border: 1px solid #666666; 
       padding: 15px; 
       margin: 10px; 
       border-radius: 5px; 
       box-shadow: #CCC 2px 2px 2px; 
       color: #333333; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <a href="#" class="padded">my padded link</a> 
     </div> 
     <div>Some other content</div> 
    </body> 
</html>

私はDIVがパディングリンクのどんな高さに拡大することの親DIVブロックに含まれるパディングのリンクを期待していました。しかし、リンクパディングはDIVや他のすべてのページで無視されるようです。

なぜこのようなことが起こり、リンクを適切に埋め込むのですか？

出典

2011-07-17 dtc

アンカータグには、display:blockというプロパティを設定する必要があります。

a.padded { 
    display: block; 
    /* display:inline-block; should 
     work too but is not supported in some version of IE */ 
}

出典

2011-07-17 23:56:26 Ibu

これは機能しますが、display：blockを追加すると、同じ行に複数のリンクが必要な場合は、浮動小数点数を追加する必要がありますか？そして、また、適切な改行を取得するためにクリアします。 – dtc

はい、私はそれがすべてのブラウザで動作するようにしたい場合は、最良の方法だと思います。 – Ibu

アンカータグはインラインオブジェクトです。

display: inline-block;〜.padded.を追加すると正常に動作します。

http://jsfiddle.net/6h7MY/

出典

2011-07-17 23:57:57

ありがとう、これは私がそれを必要とするように動作するようです。 – dtc

私は最近、自分自身にこの質問をしてきましたのでなぜこれが起こっている、this articleはのように大きな助けです。関連するビットは：

The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property.

出典

2011-07-18 01:54:36 Bialecki

HTMLリンクを正しく埋め込む方法は？

答えて

関連する問題