Treehouse: Grow your CSS skills. Land your dream job.

CSS Spacer for li

  • # June 22, 2013 at 4:00 pm

    I’m totally new to coding, and i just try my best. what im trying to do is get a spacer after every `

  • ` without manually having to add it, if not and i can only manually add it then a spacer only using CSS, but that looks clean and clear?

    Hope someone can help.
    Many thanks

# June 22, 2013 at 4:08 pm

What do you mean by a spacer?

Do you mean margin left/right or top/bottom.

An image or border?

Can you show us a picture of what you are trying to do?

# June 22, 2013 at 4:25 pm

i would like a kind of image, but preferable something that is made up by CSS if you get what i mean? i want the keep the minimal feel of everything.

just a grey/faded line of some sort?

# June 22, 2013 at 4:30 pm

is an image :)

# June 22, 2013 at 4:51 pm

Just use border-bottom and style it how you want.

If you want extra actual ‘space’ between specific list items or a divider of some kind then that’s a little more.

# June 22, 2013 at 7:27 pm

that’s something exactly like i wanted i wasn’t sure what types of lines would be in CSS :)

how would i go about making text section that would auto fit in a certain width that i choose? would be grateful for any help

# June 23, 2013 at 3:46 am

Text will automatically wrap inside an element with defined width.

# June 23, 2013 at 11:16 pm

how do i do that exactly?

# June 23, 2013 at 11:33 pm

give what ever your putting the text in a width could be pixels, percentage, ems.

# June 23, 2013 at 11:34 pm

li{width: 100px;}

# June 23, 2013 at 11:36 pm

@Paulie_D is right about using border-bottom. As far as actual spacing is concerned, keep in mind that every element on a web page is a box. That said, each li you use is its own box, and so if you want to move one li from another one, i.e., one box from another box, you simply use margin. To specify a margin is to say that you want to add space between one element and another. On the other hand, to say you want to add space _within_ an element, you specify padding.

# June 23, 2013 at 11:38 pm

Here’s Chris’s example on “The Box Model”:

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.