javascript - 无法使用 AngularJS (JavaScript) 设置边距

Question

我叫 Fernando，这是我在 Stack Overflow 中的第一个主题。我一直在寻找我的代码错误，但我没有得到任何东西。

我创建了一个带有 AngularJS 路由的应用程序，我在其中添加了一个容器，如我在示例中所示，我还添加了一个跨度和一个按钮。在那个跨度和那个按钮中，我添加了一个边距，但元素是否不遵守代码。

div.mainHeader {
	width: 100%;
	height: 25%;
	background-image: no-repeat;
	background-size: 100%;
}

div.mainHeader span {
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 18px;
	color: white;
}

div.mainHeader .md-fab {
	float: right;
    margin-right: 10px;
	margin-bottom: 10px;
}

<div class="mainHeader" ng-controller="linkController" ng-style="{'background-image': 'url({{ linkHeader + 'international.png' }})'}">
    <span>International</span>
    <md-button class="md-fab md-mini md-primary" aria-label="Favorite">
        <md-icon class="material-icons">notifications_none</md-icon>
    </md-button>
</div>

>> CLICK HERE TO SEE THE APP <<

//费尔南多·佩雷斯·拉腊 (fernando.perez.lara@outlook.com)

Answer 1

你的问题很含糊，但我认为你指的是按钮不遵守 margin-bottom 属性的事实？

这是因为元素下方没有任何东西可以“插入”边距，所以边距只是延伸到空白区域。

如果是这样，您可以尝试使用 CSS 属性:

{
    float: right;
    margin-right: 10px;
    position:relative;
    bottom:10px;
}

position:relative 是一个强大的 CSS 属性，因为它允许元素自由移动，同时保留它们在页面上的原始足迹。