ng-repeatブロック要素の間にスペースを追加するにはどうすればよいですか？

Question

私はサーバーログをデータとして使用していますng-repeat私は余白を使用してスペースを追加しようとしていますが、最後のアイテムでしか動作しません。すべてのspan要素の間に受信ログにスペースを追加するにはどうすればよいですか。

のmain.css

.messageMargin { 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

main.htmlを

<ul style="list-style: none;"> 
    <li ng-repeat="message in event.data track by $index" ng-class="{lastItem: $last}"><span class="messageMargin">{{message.value}}</span> 
    </li> 
</ul> 

Answer 1

をお試しください01の前後に新しい行があるようにブロックレベルの要素。

<span class="messageMargin" style="display:block;">{{message.value}}</span> 

Answer 2

あなたは、あなたの<span>を作成する必要があります... spanのdisplay種類を変更

.messageMargin { 
    margin-top: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
} 

Answer 3

span要素ずっと、：messageMarginあなたはそれがブロックレベル要素、インラインとしてのCSSを追加したくない場所をどこか別の場所で使用されている場合、

.messageMargin { 
    display: block; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

にあなたのCSSを変更しますか、 aはデフォルトでインライン要素です。しかしの利点を有する - （自然にかかる全体の行）block要素又はデフォルトspanとして空間の同じ量を取るinline-block要素（にそれを回すことができることをdisplayプロパティを割り当てるだから

、ブロックタイプの要素で、単純なinline要素で許可されていない余白やその他のプロパティを許可します。