无法设置文本边距以使其更低答案

【问题标题】：Can't set text margin to make it lower无法设置文本边距以使其更低
【发布时间】：2015-03-06 11:20:50
【问题描述】：

我想让我的文本降低我的文本以使其位于<div> 标记的中心。但我尝试使用margin-top 使其降低一点，但它无法正常工作。这是我的代码。

.loremipsum {
    background-color: white;
    height: 1060px;
}
.content {
    font-family: 'Lato';
    text-align: center;
}
h3 {
    font-size: 75px;
}
.h3 {
    border: 2px black solid;
    width: 750px;
    margin: auto;
    margin-top: 100px;
}

<div class="loremipsum" id="loremipsum" >
    <div class="h3">
        <h3 class="content" >Why Choose Us?</h3>
    </div>
    <p class="content">We create the best front-end design.Each template cost only $5.</p>
</div>

【问题讨论】：

为什么不直接将padding 添加到它的容器中？
你为什么使用jQuery和JavaScript标签？
@MelanciaUK，填充也不起作用。
@MikeYung：您仍然可以使用开发工具（例如，使用 google chrome 进行调试）
你听起来很迷茫，恐怕。老实说，我建议您在尝试编码之前花一些宝贵的时间阅读教程和其他材料，让您有一个开始。

标签： html css

【解决方案1】：

我建议您在进一步学习之前查看大量基于 Web 的教程，因为基于 Web 的开发非常广泛（尤其是对于完全初学者而言）

我在下面创建了一个边距和填充示例的快速演示，（我将作为评论发布，尽管出于演示目的，这可能会更好）

html{background:gray;}
div {
  height: 20px;
  border: 1px solid black;
}
.right {
  margin-right: 100px;
}
.left {
  margin-left: 100px;
}
.top {
  margin-top: 100px;
}
.bottom {
  margin-bottom: 100px;
}
.left-padded{
padding-left:100px;
}
.right-padded{
padding-right:100px;
}
.top-padded{
padding-top:100px;
}
.bottom-padded{
padding-bottom:100px;
}

<div class="normal">I'm normal</div>
<div class="right">I'm margin-right</div>
<div class="left">I'm margin-left</div>
<div class="top">I'm margin-top</div>
<div class="bottom">I'm margin-bottom</div>
<div class="left-padded">I'm padded-left</div>
<div class="right-padded">I'm padded-right</div>
<div class="top-padded">I'm padded-top</div>
<div class="bottom-padded">I'm padded-bottom</div>

【讨论】：

当我检查inspect元素时，它没有显示h3的样式。即时，它显示从body继承。但是我没有为body写任何样式。
您的浏览器添加了很多默认样式。但是浏览您的页面，您会看到页面上的元素“突出显示”。单击元素，右侧下方是当前应用于该元素的所有样式规则。
差不多，找到一个h3元素，点击它，它会显示应用的样式规则。
我按下它。但它显示 h3 类继承自 body 样式。但我不记得我为 body 写了任何样式。
这是因为在基于 Web 的开发中，子元素（嵌套元素）从任何和所有父元素继承（除非您覆盖这些样式）。但正如我所说，您的浏览器将添加其 默认 i> 样式也是如此。

【解决方案2】：

您可以将属性设置为重要。所以会优先考虑

 .h3 {
    边框：2px 黑色实心；
    宽度：750 像素；
  边距：自动；
    边距顶部：100px；

}
h3.content{padding:25px}

在小提琴上检查它：[http://jsfiddle.net/515zttfr/][1]

【讨论】：

不不不。请不要建议新的 Web 开发人员跳到使用 !important 标记。
已编辑答案。将填充添加到 h3 标记