Question

我创建了一个外部div元素，我试图在其中创建一个简单的矩形。现在，第一面的水平定位是点。但是，对于垂直定位，我希望在lenght1 div的顶部，底部和外部div之间有10px的边距。以下是我的代码。

android:visibility="invisible"

Answer 1

内部div崩溃的边缘，因此没有按预期推动。

这里有很好的解释：

一种方法是给父母overflow: auto

＆＃13;

*{
  margin:0;
  padding:0;
}
body{
  margin:10px 0;
}
div.outer{
  height:180px;
  width: 500px;
  margin: 0 auto;
  background-color:red;
  overflow: auto;
}
div.length1{
  height: calc(100% - 20px);
  width:30px;
  margin: 10px 0 10px 10px;
  background-color:blue;
}

＆＃13;

<div class="outer">
  <div class="length1"></div>
  <div class="breadth1"></div>
  <div class="length2"></div>
  <div class="breadth2"></div>
</div>

＆＃13;

另一种方法是在父级上使用padding而在子级上使用margin

＆＃13;

*{
  margin:0;
  padding:0;
}
body{
  margin:10px 0;
}
div.outer{
  height:180px;
  width: 500px;
  margin: 0 auto;
  background-color:red;
  padding: 10px;
}
div.length1{
  height: 100%;
  width:30px;
  background-color:blue;
}

＆＃13;

<div class="outer">
  <div class="length1"></div>
  <div class="breadth1"></div>
  <div class="length2"></div>
  <div class="breadth2"></div>
</div>

＆＃13;

Answer 2

使用

position:absolute;

的长度为1的风格。

像：

.length1{
    height:380px;
    width:30px;
    margin:10px 470px 10px 0px;
    background-color:blue;
    position:absolute;
 }

您也可以使用.length1而不是div.length1：）

我会删除：

*{
    margin:0px;
    padding:0px;

 }
 body{
    margin:10px 0px;
 }

如何在此矩形的顶部和底部留下边距

2 个答案: