UIコントロール間のスペースを減らす

Question

私はangularjs v1の素材を使用しています。

私はこのような単純な構成ページを持っています。

HTMLコードは以下の通りです。

<md-card> 
    <md-card-title> 
     <md-card-title-text> 
      <span class="md-headline">Room settings</span> 
     </md-card-title-text> 
    </md-card-title> 
    <md-card-content> 
     <div layout="row" layout-align="space-between center"> 
      <span>Room</span> 
      <md-select ng-model="mode" placeholder="Mode1" class="md-no-underline"> 
       <md-option value="auto">Mode1</md-option> 
       <md-option value="manual">Mode2</md-option> 
      </md-select> 
      <md-select ng-model="channel_number" placeholder="1" class="md-no-underline"> 
       <md-option value="1">1</md-option> 
       <md-option value="2">2</md-option> 
       <md-option value="3">3</md-option> 
      </md-select> 
     </div> 
    </md-card-content> 
<md-card> 

イメージでわかるように、UIコントロール間のスペースは広すぎます。私はその差をはるかに小さくしたいと思います。これを行うには、htmlや/およびcssをどのように変更する必要がありますか？

Answer 1

layout-alignをstart centerに変更し、div内の要素に余白を追加します。

... 
<div layout="row" class="spaced-children" layout-align="start center"> 
... 

CSS：

.spaced-children > * { 
    margin-right:20px; 
}  

https://plnkr.co/edit/XhYvJFJJXGO0v20eWCBw?p=preview