Html 删除应用于角度材质中的子对象的布局填充

下面是我的代码，在其中我试图只向父div添加填充，但不知何故，

布局填充也应用于内部div
，使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>


这是内容一
这是内容二
这是内容三

编辑-我也在文档中搜索过，但找不到
文档确实说“布局填充在每个flex子级中添加了填充。它还向布局容器本身添加了填充。”

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

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

例如：

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

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

实际上，flex子元素上的填充正在突出显示/反映其不同的内容。
添加
md no style
，作为相应元素上的类，会删除应用于该元素的所有样式



这是内容一
这是内容二
这是内容三


<div id="r2" flex="20">
   <div>This is content one</div>
</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>