Is there a seamless newline?

Question

When I use <br/>, there is some space between two lines. I want there is no vertical space between two lines. The line above is an image and the line below is text. I want to eliminate the space between both lines.

<img src="../common/logo.jpg" /><br/>
<span class="style2">A Comprehensive Online Workplace</span>

I want there is no space between the two lines.

I want to add a slogan to the logo and create a new compact logo.

Answer 1

Take a look into the line-height css property. line-height: 1em is possibly what you need.

Answer 2

Images, by default, are inline elements that sit on the baseline. This effectively makes an image act like a letter such as a, b, c, d or e. There is space below for descenders (which you find on letters such as g, y and q).

You can adjust this:

img { vertical-align: bottom; }

Answer 3

There’s probably not actually space between the two lines, it’s just that the text doesn’t fill the entire vertical space of the line.

This is dependent on the font, and there’s not much you can do about it. The best you can do is set the line-height CSS property of your content to 1, or possibly a smaller amount. It depends on the font you’re using, and how each browser/operating system renders it.

Answer 4

Make the span a block element so it sits below the image. Like,

.style2 {
   display: block;
}

But if you want the text to wrap around the image then you float the image to the left or right. Like,

img {
    float: left;
}

You can also try removing borders, margins, and padding.