如何将 div 里面的 div 相对于 side 对齐？答案

【问题标题】：How do I align a div inside aside in relation to aside?如何将 div 里面的 div 相对于 side 对齐？
【发布时间】：2019-12-23 23:51:51
【问题描述】：

我的布局有一个side和div如下：

https://imgur.com/Nc2QuRv

aside 里面有 div，我希望它与 aside 的边界对齐。但是，如果我设置任何边距或填充，整个侧边会相对于其上方使用的导航栏对齐。

代码如下：

html,
body {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #dbe8ae;
}

.header {
  border-radius: 25px;
  height: 14%;
  width: 100%;
  background-color: #37412a;
}

.navigation-bar {
  width: 100%;
  margin-top: 5px;
  border-radius: 7px;
  background-color: #556e3c;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
}

img.nav-action-image {
  width: 14px;
}

nav a {
  display: inline;
  text-decoration: none;
  float: left;
  color: #d1e231;
  padding: 14px 16px;
  border-right: 1px solid #bbb;
}

nav a:hover {
  background-color: #37412a;
  color: #bff000;
}

nav a.active {
  display: inline;
  background-color: #bab86c;
  color: #37412a;
}

nav:after {
  content: '';
  display: block;
  clear: both
}

.action-block {
  height: 80%;
  width: 20%;
  background-color: #37412a;
  margin-top: 5px;
}

.action-block>div.action-block-element-main {
  height: 40px;
  width: auto;
  background-color: #bab86c;
  color: #37412a;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
  vertical-align: center;
  margin: 10px;
  border-bottom: 1px solid #bbb;
}

<body>
  <header class=header>
  </header>
  <nav class=navigation-bar>
    <a href="#menu"><img class="nav-action-image" src="menu_icon.png" /></a>
    <a class="active" href="#Summary">Summary</a>
    <a href="#Summary2">Preferences</a>
  </nav>
  <aside class="action-block">
    <div class="action-block-element-main">Some text</div>
  </aside>
</body>

在上面的代码中，边距没有帮助。我无法在其中和其中的 div 内容之间找到任何差距。此外，它与导航栏对齐。有没有办法来解决这个问题？我究竟做错了什么？是谁用这种方式创造了这些东西？

【问题讨论】：

标签： html css user-interface layout

【解决方案1】：

将里面的 div 相对于 side 对齐是否意味着这个？将padding:desired 金额添加到.action-block

html,
body {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #dbe8ae;
}

.header {
  border-radius: 25px;
  height: 14%;
  width: 100%;
  background-color: #37412a;
}

.navigation-bar {
  width: 100%;
  margin-top: 5px;
  border-radius: 7px;
  background-color: #556e3c;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
}

img.nav-action-image {
  width: 14px;
}

nav a {
  display: inline;
  text-decoration: none;
  float: left;
  color: #d1e231;
  padding: 14px 16px;
  border-right: 1px solid #bbb;
}

nav a:hover {
  background-color: #37412a;
  color: #bff000;
}

nav a.active {
  display: inline;
  background-color: #bab86c;
  color: #37412a;
}

nav:after {
  content: '';
  display: block;
  clear: both
}

.action-block {
  height: 80%;
  width: 20%;
  padding:10px;
  background-color: #37412a;
  margin-top: 5px;
}

.action-block>div.action-block-element-main {
  height: 40px;
  width: auto;
  color: #37412a;
  background-color: #bab86c;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
  vertical-align: center;
  border-bottom: 1px solid #bbb;
}
.action-block-element-main
{
background-color:white;
}

<body>
  <header class=header>
  </header>
  <nav class=navigation-bar>
    <a href="#menu"><img class="nav-action-image" src="menu_icon.png" /></a>
    <a class="active" href="#Summary">Summary</a>
    <a href="#Summary2">Preferences</a>
  </nav>
  <aside class="action-block">
    <div class="action-block-element-main">Some text</div>
  </aside>
</body>

【讨论】：

实际上，我想在侧边栏的顶部留出一个边距。我希望“sometext”块稍微向下，而不是一直粘在侧边栏的顶部
@KiranCyrusKen 我更改了边距现在可以了吗？
只是为了弄清楚我想要什么，我将图像编辑为预期的输出。这是预期的布局 url：imgur.com/a/uBGh0CP。您在“一些文本”块上方看到的空白是我不能做的，需要帮助。
@KiranCyrusKen 现在检查我的答案你需要做的就是在 .action 块中添加填充
@KiranCyrusKen :)