Space above text that is next to a image

Question

As you can see. I have space above header 3, I want it to be inline with the image itself.

HTML

Answer 1

Just add a margin-top: 0px;

.content h3 {font-size: 22px;  margin-top: 0px;}

Header tags have margin applied by browsers, you are essentially resetting this style.

You should consider using a CSS Reset in future.

See this pen. http://codepen.io/JRKyte/pen/akcbF

Answer 2

If you set both elements to inline-block they will set side but side and you have more control than when floating the item - just remember to remove any white space between tags.. Just change the top margin to 0, and you don't need any unit when the value is 0.

.content > img, .content > h3 { display: inline-block; margin-top: 0; vertical-align: top;}

Answer 3

That's the default stylesheet applied by the user agent. you could reset that by margin: 0; as follows:

.content h3 {font-size: 22px; margin: 0;} 

Online Demo

User agents apply some default styles to the HTML elements. For instance they apply a top and bottom margin on the heading elements such as <h3>.

As Google Chrome sets -webkit-margin-before: 1em; and -webkit-margin-after: 1em;.

Most web developers use some CSS declarations at the top of the stylesheet called CSS Reset to reset the user agent default styles.

Whether to use a tiny reset:

* { padding:0; margin: 0;}

Or a well-known version by CSS legendary Eric Meyer.

Answer 4

The h3 has a margin by default. Just add margin-top:0; to the h3 and there you go:

http://jsfiddle.net/rhUb7/