Can't seem to work out how to change the height of certain letters in a paragraph of text.
http://jsfiddle.net/jposn92b/1/
I've tried padding at the bottom but doesn't seem to change it.
<p>Lorem ipsum dolor sit amet, <span style="padding-bottom:5px;">consectetur</span> adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?
</p>
CodePudding user response：
You've got a couple of options depending on exactly what you want.
- vertical-align
<p>Lorem ipsum dolor sit amet, <span style="vertical-align:5px;">consectetur</span> adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?
</p>- position:relative
<p>Lorem ipsum dolor sit amet, <span style="position:relative;top:-5px;">consectetur</span> adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?
</p>The principle difference is that using vertical-align will increase the height of the line box in which the span sits, while using position:relative will not.
CodePudding user response：
There are a variety of ways you can do this. You could use <sup> or <sub> tags, but then you have to reset the font size. In the end, it's adjusting the vertical-align style.
<p>Lorem ipsum dolor sit amet, <sup style="font-size:1em;">consectetur</sup> adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. <span style="vertical-align:super;">Nisi eius</span> deleniti <span style="vertical-align:sub;">voluptates</span> quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?</p>CodePudding user response：
You can use <sup> tag
<p>Lorem ipsum dolor sit amet, <sup style="padding-bottom:5px;">consectetur</sup> adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?CodePudding user response：
Try it:
<p>Lorem ipsum dolor sit amet, <sup style="font-size:1em;">consectetur</sup> adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?
</p>
CodePudding user response：
set the position as relative and top = -5px or whatever value you want.
<p>Lorem ipsum dolor sit amet, <span position:relative; top:-5px;">consectetur</span>
adipisicing elit.Ipsa omnis obcaecati dolore reprehenderit praesentium.
Nisi eius deleniti voluptates quis esse deserunt magni
eum commodi nostrum facere pariatur sed eos voluptatum?
</p>
CodePudding user response：
You should use <span style="vertical-align: 20px;">consectetur</span> in order to move some parts of the text up.