0

So I have some text between italics tags like this:

<i> Lorem ipsum...</i>

I need to indent it. I have tried the text-indent css property, but it does not work on italics tags. For the layout of my programming, I CANNOT surround the italics tags in paragraph tags, nor span tags. Please help!

  • Use not ; it is deprecated. – ncmathsadist Jul 15 '15 at 23:56
  • @ncmathsadist [`i` elements](http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element) are not deprecated. Their semantics are different than [`em` elements](http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element). – Oriol Jul 16 '15 at 00:03
  • Indeed, you are right. I just discovered what was done and it seems hairsplitting and very strange to me. – ncmathsadist Jul 16 '15 at 00:15

2 Answers2

1

text-indent only applies to block containers.

So make your i element a block container:

i {
  display: block;
  text-indent: 1em;
}


i {
  display: block;
  text-indent: 1em;
}
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan.</i>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Unfortunately, this does not work for me. Because of the formatting I have with the italics tags (they are in a dd tag which is next to a dt tag[they're on the same line because the dt is floating left]) putting the i tag on the block level makes it float left. –  Jul 16 '15 at 00:07
  • @Mr.Chameleon Then you don't want text-indent, you want `margin-left`. – Oriol Jul 16 '15 at 00:14
0

Can you use plain old padding and margins?

i {
    padding-left: 5px;
}
UnstableEagle
  • 562
  • 2
  • 16
  • Thanks! That's a simple answer. I just overlooked it. Thanks for the help :) –  Jul 16 '15 at 00:14