how to make unorder list all in same block and have gap within each link (CSS)


Tags: html,css

Problem :

Need a guidance from CSS pro. how can i get the expected result. Appreciated for any help.

What i've tried so far : JsFiddle Demo


Expected Result



Solution :

Simply give your <li> elements a margin. For example:

ul li {
    margin: 0 0 10px;
}

To avoid extra spaces below the list you can remove the last margin with the last-of-type psuedo selector:

li:last-of-type {
    margin-bottom: 0;
}

Assuming that you are content with the static fixed-width layout, you can also force the widths of all list items with:

ul li {
    width: 145px;
}

Here your adjusted fiddle.


For further reference see the tutorials at w3cschools. Specifically for the CSS width and margin properties, and the last-of-type psuedo selector.


    CSS Howto..

    How to adjust contents to automatically fit size of the screen?

    How do I change the image inside an HTML5 form-validation message?

    How to show CSS transitions only on hover?

    How do I modify the Datatable header style in PF Dynamic Columns?

    css how to select a class in another div

    How can I remove this white space from a table?

    How do I change the z-index of a div when the user mouses over it?

    How can I determine the escape sequence for characters in an icon font?

    How to specify a flex item to be of certain minimum width?

    How can I enable CSS selector profiling in Chrome

    How to centre a javascript element using inline css? [closed]

    How to create a box when mouse over text in pure CSS?

    How do I link an external css to overwrite bootstrap css for centering elements?

    How to get different style in nested element depending to depth level?

    How to inline the contents of an entire stylesheet with Wordpress?

    CSS How to make element in the middle to shrink before its sibling jumps down

    how to go bottom of a website like back to top using javascript?

    Css Trick - How to align this div

    Section background image showing empty space in bottom [closed]

    iOS How to access Library in CSS Url's?

    How does a CSS rule override another CSS rule?

    How to get rid of space and align two objects in one line in css/html?

    HTML/ CSS: A href exceeds linking image - how to avoid?

    CSS: How to position an to the middle of the parent element [closed]

    how to deal with repeated letters in a javascript hangman game

    How to make text box to overlap with the image?

    How to override CSS for TextBoxFor field?

    How to style this with css? [closed]

    How to set background url for css files in thymeleaf?

    How to prevent a div from disappearing when you hover a link in pure css