CODEWITHSUNDEEP
htmlcss
POV
POV

Reputation: 12005

How margin text from left of element?

There is span block with icon inside:

<span><i></i>Text</span>

Icon has CSS:

i {
   display: inline-block;
   width: 20px;
   height: 20px;
}

If text is long it wraps to next line under icon i.

How to wrap text with margin-left: width of icon

I have now this:

Icon - Text he
re

But I need:

Icon - Text he
       re

Upvotes: 0

Views: 51

Answers (3)

Łukasz Nojek
Łukasz Nojek

Reputation: 1641

You can indent the span right and the icon left:

i {
   display: inline-block;
   width: 20px;
   height: 20px;
   margin-left: -20px;
   background: yellow;
}

span {
   display: inline-block;
   width: 40px;
   margin-left: 20px;
}
<span><i></i>Text here</span>

Upvotes: 1

j08691
j08691

Reputation: 207901

You can use flexbox:

span {
  display: flex;
}

i {
  margin-right: 4px;
  min-width: 20px;
  height: 20px;
  border: 1px solid #000;
  background: red;
}
<span><i></i>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </span>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115045

Absolute positioning

span {
  position: relative;
  padding-left: 25px;
  width: 200px;
  display: inline-block;
  border: 1px solid red;
  margin: 1em;
}

i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background: pink;
}
<span><i>I</i>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, quam.</span>

Upvotes: 2

Related Questions