删除在角度材料中应用于子级的布局填充答案

【问题标题】：Remove layout padding applied to child in angular material删除在角度材料中应用于子级的布局填充
【发布时间】：2016-08-13 07:27:41
【问题描述】：

以下是我的代码，我在其中尝试仅向父 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

【问题讨论】：

标签： html css angularjs material-design angular-material

【解决方案1】：

文档确实说 “layout-padding 在每个 flex 子项中添加了填充。它还向布局容器本身添加了填充。”

如果你仔细看，你会发现左 div 中的文本与右上 div 中的文本对齐。只是左边的 div 没有右边的 div 有内部 div。

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

例如：

 <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 上的 padding 正在突出/反映它们的不同内容。

【讨论】：

【解决方案2】：

将md-no-style 添加为相应元素的类确实会删除应用于该元素的所有样式。

<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>

【讨论】：