使用内联css更改文本段落中字符的垂直位置

Question

似乎不知道如何更改文本段落中某些字母的高度。

http://jsfiddle.net/jposn92b/1/

我试过在底部填充，但似乎没有改变。

<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>

Answer 1

您有几个选项，具体取决于您想要什么。

1. 垂直对齐

<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>

2. 位置：相对

<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>

主要区别在于，使用垂直对齐会增加跨度所在的线框的高度，而使用position:relative则不会。

Answer 2

有多种方法可以做到这一点。您可以使用<sup>或<sub>标记，但必须重置字体大小。最后，它调整了vertical-align的风格。

<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>

Answer 3

您可以使用<sup>标签

<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?

Answer 4

试试看：

<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>

Answer 5

将位置设置为相对位置，top=-5px或您想要的任何值。

<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>

Answer 6

您应该使用<span style="vertical-align: 20px;">consectetur</span>来向上移动文本的某些部分。