Aharon Snyder Aharon Snyder - 3 years ago 128
HTML Question

I have an HTML/CSS issue that i cant seem to figure out (beginner level)

So i have this test site that i am building and i am having a CSS issue that makes no sense as you will see in the jsfiddle i linked below i have a div which makes up the first big box (class p1 and ps) for some reason my text bar (class tagto with the words COMING SOON) has a margin of about 20px on the top and bottom. There is no reference to a margin in my css that should be doing this i have gone through every line maybe a dozen times and just dont get it so i turn to you people who have helped me many times before.
If you can please take a quick look and help me out. It would greatly appreciated.

<body>
<div class="header">
<div class="header-content">
<div class="one"><h1 class="name">Title of Site</h1></div>
<div class="one two"><h5 class="tag">Subtext</h5></div>
</div>
</div>

<div class="codepen"></div>
<div>
<div class="p1 ps">
<img class="img" src="http://placehold.it/300x200" >
<p><h3 class="tagto">COMING SOON</h3></p></div>
<div class="p2 ps">
<p class="c2"><h3 class="tagto">COMING SOON</h3></p></div>
<div class="p3 ps">
<p class="c3"><h3 class="tagto">COMING SOON</h3></p></div>

</div>

</body>


The CSS is in the jsfiddle because the code block here doesnt format it right.

https://jsfiddle.net/kd2q454c/

Answer Source

The margin is from the browser rules. Set:

p, h3 {margin:0;} 

in your CSS to override browser based rules.

Fiddle HERE

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download