Issue with margins / vertical text aligment inside box

I try to make an html text box with scroll overflow and vertical text align. Everything seems OK except that the bottom has no "room" like the top, and it looks ugly. I have tried with several attributes with no luck. I have attached a screenschot Needs some margin below

This is the html code:

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

can someone help me please? Thanks in advance,

Solution

Here is an example that should get you close to what you're looking for:

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

The jist of it is to put your background image and positioning on an outer div, and then put your text inside of that in a div that has some margin-top and the height set to provide appropriate margin on the bottom. The inner div also controls overflow.