想要在内容 div 中添加文本框 div答案

【问题标题】：Want to add text box div inside content div想要在内容 div 中添加文本框 div
【发布时间】：2015-02-03 22:20:12
【问题描述】：

快速说明：我昨天刚开始学习 HTML，这对我来说是非常新的，所以请不要太苛刻——也就是说，如果有人看到任何可以以更简单的方式完成的代码或有任何随机建议除了我的要求，请不要犹豫分享。我有一种感觉这是非常糟糕的脚本，这个网站更多的是帮助我学习 html 而不是实际使用，所以有些地方我只是在尝试和错误来使某些事情正常工作，结果你可能会看到不必要的代码躺在身边。如果它困扰你，也指出来！

无论如何，进入帖子的重点。我想在 div.contentbg 中有 div.textbox，margin-top: 15px。但是，当我尝试这个时，它会将边距应用于 div.contentbg 而不是 div.textbox ......这可能真的很愚蠢。有什么帮助吗？提前致谢！ :D

这里是网站：http://jsfiddle.net/gbk8zhwv/1/embedded/result/

代码如下：

<html> <title>JBROblivion</title> <head> <style> * {
  margin: 0;
  padding: 0;
}
body {
  background-color: black;
  margin: 0px;
  padding: 0px !important;
  height: 100%;
}
a {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  margin: 0;
  padding: 0;
}
div.contentbg {
  background-color: #660000;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
div.textbox {
  width: 90%;
  margin: 0px auto;
}
div.lrmipsm {
  width: 500px;
}
#nav {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  background-color: #5C0000;
  border-bottom: 2px solid #853333;
}
#nav ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 1000px;
}
#nav li {
  float: left;
}
#nav li a:link,
a:visited {
  display: block;
  padding: 15px;
  width: 170px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #5C0000;
  text-align: center;
  text-transform: uppercase;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
#nav li a:hover,
a:active {
  background-color: #520000;
}
h1.centre {
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-align: center;
  text-transform: uppercase;
}
p.introblock {
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
</style> </head>

<body>

  <img src="http://yt3.ggpht.com/-HKi7fjQseQ0/VJzF49SbsxI/AAAAAAAAAJI/zbpOKJ0Uy0E/w2120-fcrop64=1,00005a57ffffa5a8-nd/Channel%2BArt%2BMask.jpg" alt="Banner" width="100%">

  <div id="nav">
    <ul>
      <li><a href="default.htm">Home</a></li>
      <li><a href="about.htm">About</a></li>
      <li><a href="milestones.htm">Milestones</a></li>
      <li><a href="shop.htm">Shop</a></li>
      <li><a href="https://www.youtube.com/user/JBROblivion" target="_blank">Youtube</a> </li>
    </ul>
  </div>

  <div class="contentbg">
    <div class="textbox">

      <h1 class="centre">Intro</h1>
      <br>
      <div class="lrmipsm">
        <p class="introblock">Lorem ipsum... sample text.
        </p>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

padding-top 能在文本框上工作吗？
尝试添加<div class="contentbg">&nbsp;
@SharpCode 我将 padding-top 添加到 h1.centre 并且有效。但是，当我尝试用 1 个 div 替换 2 个 div 并应用填充时，即：div.contentbg { background-color: #660000; width: 900px; padding: 50px 20px 0px 50px; margin-left: auto; margin-right: auto; } 什么也没发生...
在下面查看我的答案。那么最好保留2个div。需要查看 1 div 示例的代码才能解决此问题。
刚刚用我的示例代码进行了测试。我删除了第一个 div 并将 margin-top 更改为 padding-top 并且它起作用了。你可能正在做一些非常简单的错误。重新检查您的代码。

标签： html css youtube margin

【解决方案1】：

它不起作用的原因是contentbg 实际上没有任何自己的内容。请注意示例中的运行方式，因为第一个 div 中有内容。如果您删除“这是一些内容”，它似乎不会起作用，因为没有内容可以锻炼从哪里开始边缘化（因为没有更好的词）。

示例

div {
    background-color: yellow;
}

div.ex {
    background-color:red;
    margin-top: 40px;
}

<div>This is some content
    <div class="ex">This is some content on the inner div.</div>
</div>

如果您的 div 像您的那样是空的，我建议您改用 padding 属性。这将使 div 留在原处，而是在您需要填充的 div 内容周围产生一些填充。

【讨论】：