Issue with margins / vertical text aligment inside box

Question

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,

Instead of showing screenshots, please give a live example, a [fiddle](http://jsfiddle.net/) or something similar. — CBroe, Aug 08 '14 at 16:43
When you say it "needs some margin below" it's not very clear what you mean. I see that in the screenshot the container is not scrolling and the reason it looks like more space is needed is because the text is cut off. [This](http://www.w3.org/TR/CSS2/box.html) should help you understand how padding and margins work. — Hamilton Lucas, Aug 08 '14 at 16:48

score 0 · Accepted Answer · answered Aug 08 '14 at 16:54

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.

It may also be helpful to understand [the difference between div and span](http://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span). — Hamilton Lucas, Aug 08 '14 at 16:56

score 0 · Answer 2 · answered Aug 09 '14 at 09:26

Thanks a lot for help, after reading some advices I managed to fix it, here is the code just for anyone feeling curious:

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

Please note i am not skilled and I am sure this code is not optimal... just seems to do the trick.

You can see the result in enter link description here (it's my website, still building it)

Thanks everyone and sorry for my poor english language.

Issue with margins / vertical text aligment inside box

2 Answers2