CODEWITHSUNDEEP
htmlcsslist
user1032531
user1032531

Reputation: 26301

Change line spaces on horizontal description list <dl>

I've created a description list where the titles and data are on the same line (http://jsfiddle.net/ajkuwwsc/)

enter image description here

I would like to add space between Row Two and Row Three (and not all the rows which I am able to do), and make EMAIL line up with the email address and icon.

My attempt to add space between rows two and three was not successful! (http://jsfiddle.net/ajkuwwsc/1/). I am not sure how to pull up the email to be in line.

How is this accomplished?

enter image description here

dl {
    width: 395px;
    font-size:12px
}
dd, dt {
    padding-top:5px;
    padding-bottom:5px;
}
dt {
    float:left;
    padding-right: 5px;
    font-weight: bolder;
}
dt {
    clear: left;
}
dt, dd {
    min-height:1.5em;
}
/* .more-space{padding-bottom:20px;} */

<dl>
    <dt>Row 1:</dt>
    <dd><a href="javascript:void(0)">Bla bla bla</a></dd>
    <dt class="more-space">Row Two:</dt>
    <dd><a href="javascript:void(0)" class="more-space">Bla bla bla Bla bla bla</a></dd>
    <dt>Row Three (3):</dt>
    <dd><a href="javascript:void(0)">Bla bla</a></dd>
    <dt>EMAIL:</dt>
    <dd>
        <a href="javascript:void(0)">[email protected]</a>
        <a href="mailto:[email protected]"><img title="Send Email" src="http://s8.postimg.org/85a36p329/messages.png" alt="Send Email"></a>
    </dd>
    <dt>Row 5:</dt>
    <dd><a href="javascript:void(0)">Bla bla</a></dd>
    <dt>Empty Row:</dt>
    <dd></dd>
    <dt>Row 6:</dt>
    <dd><a href="javascript:void(0)">Bla</a></dd>
</dl>

Upvotes: 0

Views: 837

Answers (1)

Shaggy
Shaggy

Reputation: 6796

It's the alignment of the image that's causing an issue in the first instance. You can fix that by giving it a vertical-align value of middle

img{
    vertical-align:middle;
}

More information on vertical-align

For the spacing, rather than creating a new class (which, incidentally, you were only applying to the dt and not the dd that followed), you can target the items you want to create space beneath using the :nth-of-type pseudo class.

dt:nth-of-type(2),dd:nth-of-type(2){
    margin:0 0 20px;
}

More information on :nth-of-type

Upvotes: 2

Related Questions