CODEWITHSUNDEEP
cssindentationtext-indent
Schwesi
Schwesi

Reputation: 4904

Text-indent after image

I am trying to indent text wrapped in a <span> tag.
The first line is moved to the right because of an image and I would like the following lines to start with the same indentation as the first one.

Here is the fiddle, illustrating my problem: https://jsfiddle.net/scoa8npd/

And here is my simple code:

HTML

<img src="https://schwesidesign.com/active.gif" class="cross" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>


CSS

.cross { padding-right: 5px; }

span {
  margin-left: 10px;
  text-indent: -10px;
}

Thank you very much for your help!

Upvotes: 2

Views: 2095

Answers (3)

prajakta
prajakta

Reputation: 162

use float:left and margin-bottom to cross div:

.cross {
    padding-right: 5px;
    float: left;
    margin-bottom: 60px;
}

Upvotes: 1

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

You can make the span an inline-block then the margin-left will move all the lines correctly.

Example

Code:

span {
    margin-left: 10px;
    display: inline-block;
    width: calc(100% - 40px);
    vertical-align: top;

}

Upvotes: 2

phts
phts

Reputation: 3915

If your current markup is not important (image+span) then you can use a <ul> with custom list-style-image.

ul {
    list-style-image: url('https://schwesidesign.com/active.gif');
}

https://jsfiddle.net/scoa8npd/1/

Upvotes: 1

Related Questions