html - 填充无效

因此，建议我不要在布局中使用表格，而我尝试过这样做，这给了我这个烦人的问题，那就是它无法按照我想要的方式工作。

这是我目前的最终结果：

但是，我想将右下框中的问候打到与它上方的Home文本相同的左边距/内边距。

这是我的代码。

@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中的nav和maintext id的边距和填充更改为，但它似乎仍然不会变。然后，我尝试了多种显示样式的更改（尽管不是全部，因为我是CSS和idk的新手，可以做到这一点）。他们大多数似乎没有工作。

同样，如果有人可以缩小前两个方框与后两个方框之间的差距，那也将是巨大的，但并非完全必要。

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

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

最佳答案

我将box-sizing: border-box添加到nav和.maintext，然后将width: 80%; overflow: auto;添加到.maintext，使其位于nav旁边，然后使用与应用于.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>

MainText

html - 填充无效