Weird vertical space between div and ul

Question

here is a fiddle ( http://jsfiddle.net/zq3YA/2/ ) showing the thing I'm trying to correct. I want to make a stylish , and so I want a list (ul) to be placed just under a bordered container (div). The problem is that I have an unwanted vertical space between them. I've already tried to removed the margin etc., but nothing works.

Here is the html :

<div class="selector">
    <div class="selector-select">
        <div class="selector-value"></div>
        <a href="#" class="selector-button"></a>
    </div>                
    <ul class="selector-list">
        <li class="selector-item">Toto</li>
        <li class="selector-item">Titi</li>
    </ul>  
</div>

Here is the css code :

.selector
{
    width                   : 200px;
}

.selector-select
{
    margin                  : 0;
    padding                 : 0;
    position                : relative;
}

.selector-select, .selector-value
{
    display                 : inline-block;
    height                  : 20px;
}

.selector-select, .selector-list
{
    border-style            : solid;
    border-width            : 1px;
    min-height              : 1px;
}

.selector-value
{
    width                   : 180px;
}

.selector-button
{    
    display                 : inline-block;
    width                   : 20px;
    height                  : 100%;
    background-color        : blue;
    position                : absolute;
    right                   : 0;
    top                     : 0;
}

.selector-list
{
    width                   : 170px;
    list-style-type         : none;
    margin                  : 0;
    padding                 : 0;
}

.selector-item
{
    margin                  : 0;
    padding                 : 0;
} 

.selector-item:hover
{
    background-color        : blue;
}

Do you have any idea of what happends ?

Thanks in advance.

One answer from @user924016 is to use `float-left` for the element with class `.selector-select`. But the explaination of the presence of this space is always a mystery. — dooxe, Aug 05 '13 at 09:19
Another solution is from @loops, and it consists in putting : `.selector-select, .selector-list { border-style: solid; border-width: 1px; display: table; //block // inherit min-height: 1px; }` — dooxe, Aug 05 '13 at 09:26
It's not a mystery. It's the space left for descenders on characters like g, j, y. See my answer. — Alohci, Aug 05 '13 at 09:51
Another solution is from @Alohci and is to put `.selector-value { vertical-align: bottom; }` — dooxe, Aug 05 '13 at 10:16

score 2 · Answer 1 · answered Aug 05 '13 at 09:19

2

.selector-select, .selector-list {
    border-style: solid;
    border-width: 1px;
    display: table; //block // inherit
    min-height: 1px;
}

Also solves the issue.

answered Aug 05 '13 at 09:19

daniel__

11,633
15
64
91

score 0 · Answer 2 · answered Aug 05 '13 at 09:13

0

One way of fixing it is using float: left;

answered Aug 05 '13 at 09:13

Ronni Skansing

1,494
1
17
33

Thanks, it has fixed it. But I don't ever understand why this space exists. – dooxe Aug 05 '13 at 09:19

score 0 · Answer 3 · answered Aug 05 '13 at 09:17

0

Just float .selector-select to the left

http://jsfiddle.net/zq3YA/4/

answered Aug 05 '13 at 09:17

Mariyan

664
6
20

score 0 · Accepted Answer · answered Aug 05 '13 at 09:46

0

It's because the div with class "selector-value" is sitting on the baseline, so there's space for character descenders.

Add .selector-value { vertical-align: bottom; } to the CSS

answered Aug 05 '13 at 09:46

Alohci

78,296
16
112
156

I see what you mean. It works too, thanks a lot. – dooxe Aug 05 '13 at 10:02

Weird vertical space between div and ul

4 Answers4