框内边距/垂直文本匹配问题

Question

我试图使一个html文本框与滚动溢出和垂直文本对齐。除了底部没有像顶部那样的“空间”，一切看起来都很好，而且看起来很难看。我试过几个没有运气的属性。我附上了一个屏幕需要一些以下的保证金

这是html代码：

<div style="
position: absolute;
color: #FFF !important;
margin: -14px 0px 0px 469px;
text-align: left;
overflow: scroll;
width: 123px;
height: 222px;
letter-spacing: 0.5px;
background-color: rgba(81, 96, 116, 0.6);
font-size: 12px;
z-index: 10;
line-height: 222px;
">
<span style="
display: inline-block;
vertical-align: middle;
line-height: 18px;
padding: 10px;
">I use Ableton Live as main audio/MIDI sequencer, complemented by an array of 3rd party virtual FX and instruments (Toontrack®, Spectrasonics®, Izotope®, ReFX®, etc.), and a vast sample libray located in external drives</span></div>

有人能帮帮我吗？提前谢谢你，

Answer 1

下面是一个应该让您接近您所要寻找的内容的示例：

<div style="position:absolute; left: 100px; top:100px; width:140px;  height:140px; background: blue;">
    <div style="margin-top:20px; height:100px; overflow-y: scroll;">
        Inner div with lorem ipsum. 
        Inner div with lorem ipsum.
        Inner div with lorem ipsum.
        Inner div with lorem ipsum.
    </div>
</div>

它的主要目的是将背景图像和定位放在外部div上，然后将文本放入一个div中，该div具有一定的页边距和设置的高度，以便在底部提供适当的页边距。内部div还控制溢出。

Answer 2

非常感谢您的帮助，在阅读了一些建议之后，我成功地修复了它，这是为那些感到好奇的人编写的代码：

<div style="
position: absolute;
margin: -14.4px 0px 0px 469px;
width: 123px;
height: 222.4px;
line-height: 192.4px; /*line-height = height OF INTERNAL DIV TO ACCOMPLISH CENTERED TEXT*/
background-color: rgba(81, 96, 116, 0.6);
z-index: 5;
">
<div style="
padding: 0px;
overflow-y: scroll;
vertical-align: middle;
display: inline-block;
margin: 15px 10px 15px;
height: 192.4px; /* = CONTAINER DIV HEIGHT - 2*margin */
">
<span style="
display: inline-block;
vertical-align: middle;
line-height: 16px;
color: #FFF !important;
font-size: 12px;
text-align: left;
letter-spacing: 1px;
">I use Ableton Live as main audio/MIDI sequencer, complemented by an array of 3rd party virtual FX and instruments (Toontrack®, Spectrasonics®, Izotope®, ReFX®, etc.), and a vast sample libray located in external drives</span></div></div>

请注意，我不是熟练的，我相信这个代码不是最佳的.只是看起来起作用了。

您可以在在这里输入链接描述中看到结果(这是我的网站，还在构建)

谢谢大家，为我糟糕的英语语言感到遗憾。