时间戳

首页 > 解决方案 > 上边距不起作用

css - 上边距不起作用

问题描述

我怎样才能让它margin-top工作？工作正常，margin-left但是什么也没发生margin-top

p.ex1 {
  margin-top: 15px;
  margin-left: 35px;
}
<div class="footer2">

  <p class="ex1"> ABOUT US </p>

  <hr>


  <div class="footer">
    <br>
    <p id="top">
      <font size="5">Contact us</font>
    </p>
  </div>

标签： css

解决方案

根据您的特定浏览器，标签top-margin上有默认值。p在 Firefox 上，这是 16px（可能源自 1em），在您添加任何 CSS 之前就已存在。因此，如果您设置top-margin为 15px，则几乎没有可预见的差异。尽管如此，它确实 有效 - 将其设置为 25px（或任何与 16px 明显不同的值，或者设置为 0px 以真正看到它而没有 任何上边距），你会看到它。

在以下示例中，我更改了您的代码段，使其显示没有 上边距的元素（即我将其设置为零）。当您将鼠标悬停在它上面时，上边距设置为 15px。在那里你看到了不同...

p.ex1 {
  margin-top: 0px;
  margin-left: 35px;
}
p.ex1:hover {
  margin-top: 15px;
}
<div class="footer2">

  <p class="ex1"> ABOUT US </p>

  <hr>


  <div class="footer">
    <br>
    <p id="top">
      <font size="5">Contact us</font>
    </p>
  </div>

推荐阅读