填充不起作用

Question

所以有人建议我不要在我的布局中使用表格，我试过了，但它给了我一个烦人的问题，即无法按照我想要的方式工作。

这是我目前的最终结果：

但是，我想将右下框中的问候语移动到与其正上方首页中的文本相同的左侧 margin/padding。

这是我的代码。

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
#Cogna {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 60px;
  font-weight: bold;
  border: 2px solid black;
  padding: 40px 20px 10px 20px;
  margin-right: 0.5em;
  width: 20%;
  height: 20%;
}

h1 {
  font-family: 'Lobster Two';
  vertical-align: text-bottom;
  font-size: 20px;
  border: 2px solid black;
  height: 20%;
  padding: 4em 1em 1em 1em;
}

.maintext {
  padding: 1.58em;
  height: 46em;
  display: block;
  border: 2px solid black;
  min-width: 80%;
}

nav {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 1em;
  padding: 40px 20px 10px 20px;
  overflow-y: scroll;
  width: 20%;
  height: 46em;
  border: 2px solid black;
}

nav ul {
  list-style: none;
}

<div>
  <div id="Cogna">Cogna</div>
  <h1>Home</h1>
</div>

<div>
  <nav>
    <ul>Home</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <span style="display: block; height: 100%;"></span>
  </nav>
  <div class="maintext">
    <p style="margin-left: 16pt;">
      Hello.
    </p>
  </div>
</div>

但是，我似乎无法正确完成该任务。我已经将我的 CSS 中导航和 maintext id 的边距和填充更改为，它似乎仍然不会移动。然后我尝试了各种显示样式更改（尽管不是全部，因为我是 CSS 的新手，我不知道哪个可以完成这项工作）。他们中的大多数似乎都没有用。

此外，如果有人可以缩小顶部两个框和底部两个框之间的差距，那也很好，但并非完全必要。

div 元素 maintext 应捕获左下框中的所有段落，因此我希望该元素中的所有文本都具有该填充。

任何帮助都会很棒。谢谢。

Answer 1

我会将 box-sizing: border-box 添加到 nav 和 .maintext，然后将 width: 80%; overflow: auto; 添加到 .maintext 以使其位于 nav 旁边，然后只需使用与应用于 h1 相同的填充 .maintext 如果您希望它与该填充匹配。

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
#Cogna {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 60px;
  font-weight: bold;
  border: 2px solid black;
  padding: 40px 20px 10px 20px;
  margin-right: 0.5em;
  width: 20%;
  height: 20%;
}

h1 {
  font-family: 'Lobster Two';
  vertical-align: text-bottom;
  font-size: 20px;
  border: 2px solid black;
  height: 20%;
  padding: 4em 1em 1em 1em;
}

.maintext {
  padding: 1.58em;
  height: 46em;
  display: block;
  border: 2px solid black;
  width: 80%;
  overflow: auto;
  padding-left: 1em;
}

nav {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 1em;
  padding: 40px 20px 10px 20px;
  overflow-y: scroll;
  width: 20%;
  height: 46em;
  border: 2px solid black;
}

nav ul {
  list-style: none;
}

nav, .maintext {
  box-sizing: border-box;
}

<!DOCTYPE html>
<html>
<head>
    <title>Cogna</title>
    <link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>

<div>
    <div id="Cogna">Cogna</div>
    <h1>Home</h1>
</div>

<div>
    <nav>
        <ul>Home</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <span style="display: block; height: 100%;"></span>
    </nav>
    <div class="maintext">
        <p style="margin-left: 16pt;">
            Hello.
        </p>
    </div>
</div>

</body>
</html>

填充不起作用

Padding not working

html

css

margin

margins

padding