<p> Box非常大，我不知道为什么

Question

为什么我的段落标签上的方框真的很大？我认为这可能是我无法用<p>推送margin-top: 50px;代码的原因

.train p {
  margin: 0;
  font-size: 2.5vw;
}

<div class="train">
  <p class="train">In Training</p>
  <hr>
</div>

Answer 1

<p>标记是一个块元素。阻止级别元素，无论其宽度如何，都在其父级中占用整行。尝试在要打造样式的作品周围包裹一个范围

Answer 2

一个简单的示例，供您查看问题（也是调试HTML / CSS的好方法）。 <p>和<div>默认为block level个元素

  

     

强烈建议您花3分钟阅读以下链接

     

参考：http://dustwell.com/div-span-inline-block.html

p.train {
  margin: 0;
  font-size: 2.5vw;
  background: red;
}

<div>
  <p class="train">In Training</p>
  <hr>
</div>

解决方案：

将p设置为内联块

或

只需使用内联元素span：

p.train {
  margin: 0;
  font-size: 2.5vw;
  background: red;
  display: inline-block;
}

.green {
  margin: 0;
  font-size: 2.5vw;
  background: red;
}

<div>
  <p class="train">In Training</p>
  <hr>
  <span class="green">In Training</span>
</div>