删除应用于 angular material 中子项的布局填充

Question

以下是我的代码，其中我试图仅向父 div 添加填充，但不知何故 layout-padding 也应用于内部 div <div layout="column" flex>使 div 向下移动一点。请查看随附的屏幕截图 -

我的代码-

<div layout="row" style="height: 100%;" layout-padding>
        <div id="r2" flex="20">This is content one</div>

        <div layout="column" flex>
            <div id="r3" flex="15">This is content two</div>
            <div id="r7" flex>This is content three</div>
        </div>
    </div>

编辑 - 我也在文档中进行了搜索，但找不到 https://material.angularjs.org/latest/layout/options

Answer 1

文档确实说 "layout-padding adds padding inside each flex child. It also adds padding to the layout container itself."

如果你仔细看，你会发现左边 div 的文字与右上角 div 的文字对齐。只是左 div 没有像右 div 那样的内部 div。

我建议您手动将填充添加到行中（不要使用任何 angular 方法，因为这似乎不是一个简单的选项。）

例如：

 <div layout="row" style="height: 100%; padding:1em ">

我承认我不熟悉 Angular 所以也许有一种方法我没有看到（或理解）。

或..将内部 div 添加到 #r2

<div id="r2" flex="20">
   <div>This is content one</div>
</div>

然后 #r2 内部的填充将匹配列 div.

内部的填充

基本上，目前 flex-children 上的填充是 highlighting/reflecting 它们的不同内容。

Answer 2

在相应元素上添加 md-no-style 作为 class 确实删除了应用于该元素的所有样式。

<div layout="row" style="height: 100%;" layout-padding>
    <div id="r2" flex="20">This is content one</div>

    <div layout="column" flex>
        <div id="r3" flex="15">This is content two</div>
        <div id="r7" flex>This is content three</div>
    </div>
</div>

删除应用于 angular material 中子项的布局填充

Remove layout padding applied to child in angular material

html

css

angularjs

material-design

angular-material