CODEWITHSUNDEEP
htmlcssparagraph
ThatPurpleGuy
ThatPurpleGuy

Reputation: 456

<p> Box is really big and I don't know why

enter image description here

Why is the box on my paragraph tag really big? I think this may be the reason why I can't push the <p> tag down with margin-top: 50px; 

.train p {
  margin: 0;
  font-size: 2.5vw;
}
<div class="train">
  <p class="train">In Training</p>
  <hr>
</div>

Upvotes: 0

Views: 624

Answers (2)

Dalin Huang
Dalin Huang

Reputation: 11342

A simple example for you to see the problem (also a good way to debug HTML/CSS). <p> and <div> those are by default block level elements

enter image description here

Strongly suggest you to taking 3 mins to read the following link

REF: 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>

Solution:

Set p to inline-block

or

just use a span which is an inline element:

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>

Upvotes: 0

jalen201
jalen201

Reputation: 303

The <p> tag is a block element. Block level elements, regardless of their width, take an entire line to themselves within their parent. try wrapping a span around the piece that you want to style

Upvotes: 1

Related Questions