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

Posted 2023-03-05

【中文标题】无法设置文本边距以使其更低

【英文标题】：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 进行调试）

你听起来很迷茫，恐怕。老实说，我建议您在尝试编码之前花一些宝贵的时间阅读教程和其他材料，让您有一个开始。

【参考方案1】：

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

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

htmlbackground: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.contentpadding:25px 

`

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

【讨论】：

不不不。请不要建议新的 Web 开发人员跳到使用 !important 标记。

已编辑答案。将填充添加到 h3 标记