余白部分は<a>タグの下にスペースを作成しません

Question

私のHTMLフォーム内には、というラベルと、それに続くラベル<label ...>...</label>があります。私はGoogle Chromeのコンソールを使用して要素を検査する場合

form a { 
    margin-bottom: 10px; 
} 

は、aタグが実際に10pxののmargin-bottomあります。私はこのようなリンクのために下のマージンを設定します。しかし、ラベルのすぐ下にはスペースがありません。そこにいくつかのスペースを生成するにはどうすればいいですか？

Answer 1

段落<p>タグでリンクをラップするためのより良い練習になるだろう。その後、余白を追加します。

<p><a href="#">...</a></p> 

とCSS：

p { 
    margin-bottom: 10px; 
} 

要素は垂直間隔を達成するために、ブロックレベルである必要があります。または、aでブロックを強制することができます。display: block

Answer 2

デフォルトではaタグはインライン要素なので、余白を追加することはできません。あなたはブロック要素に関連付けられたマージンや他の属性を参照するブロック要素のようなあなたのaタグの表示を行う必要があります：

form a { 
    display: block; 
    margin-bottom: 10px; 
} 

Answer 3

アンカータグdisplay:inline-block;に余白ができるようにします。

form a { 
    display:inline-block; 
    margin-bottom: 10px; 
}