html - パディングトップが機能しない

Question

なぜ機能しないpadding-topのですか？の高さdivが設定されています。

HTML：

<div class="menu">
    <a href="#">APIE MUS</a>
    <a href="#">REKLAMA</a>
    <a href="#">PARTNERIAI</a>
</div>

CSS：

 .menu {
      width: 300px;
      height: 30px;
      background: red;
 }
 .menu a {
      padding-top: 10px;
 }

Answer 1

のようなインライン要素にマージンを適用できないため、(マージンを使用した)例は機能しませんa, span, b。

見てみましょう：

• http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
• http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

問題を解決するには:

追加するだけdisplay:inline-block;

この値 (インライン ブロック) により、要素はインライン レベルのブロック コンテナーを生成します。インライン ブロックの内部はブロック ボックスとしてフォーマットされ、要素自体はアトミック インライン レベル ボックスとしてフォーマットされます。 ソース: http://www.w3.org/TR/CSS2/visuren.html#inline-level

したがって、これで問題が解決します：

.menu a{
    margin-top: 10px;
    display:inline-block;
}