How to reduce space between unordered list and its previous element(center)?


Tags: html,css,list

Problem :

Consider the header in the following image:

enter image description here

I am using the following HTML and CSS code for the header.

HTML:

<div id="header">
    <center><h1>Knowledge Explorer</h1></center>
    <ul id="customlist">
        <li><a href="#">Search</a></li>
        <li><a href="#">Compare</a></li>            
        <li><a href="#">Connect</a></li>
    </ul>
</div>

CSS:

    #header {
        background-color:#787878;
        color:white;
        padding:0.2px;
    }
    #customlist li{
        display: inline;
        list-style-type:none;
        padding-right:20px;
    }

I want to reduce space between "Knowledge Explorer" and list elements. Is it possible to do that ? I also want to change the color of list elements. I didn't find a way to do these. Can someone explain how to do these ?

Thank you.



Solution :

Both your <h1> and <ul> elements have default margin on the bottom and top, respectively. Adjust or remove them and your gap is gone:

h1{
    margin-bottom: 0;
}
#customlist{
    margin-top: 0;
}

JSFiddle


    CSS Howto..

    How to create border around jquery mobile webpage?

    How to ignore white spaces in between tags, CSS, PHP

    How to get conditional css to work on Blogger/Blogspot?

    How to prevent anchor tag from following the link on click, but make it show the submenu?

    How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

    How to mix url string & attribute value in CSS content property? [duplicate]

    How to change active color of bootstrap button group to have different color for each button

    how to remove margin or padding of window in javascript/css?

    How to centre my CSS menu?

    How to simulate multiple
    tag with CSS

    How to detect CSS is turned off with PHP?

    How do I make my div scale to larger than it's original size using css animation?

    How about taking out Bootstrap style? [closed]

    How can I position an element in the middle of the window while using position: absolute?

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    How to <%= link_to %> entire area of
  • in Ruby on Rails
  • How to make submenus drop down below parent menu, instead of flying out?

    How do you set the scroll bar skin on a single List instance?

    My sidebar is going over the footer. How can I sort this out?

    How do I create triangles like this? [closed]

    how to position nested list items?

    CSS - how to avoid class= for every single paragraph?

    CSS - How to select multiple attribute values?

    Linking CSS button to email - How can it be done?

    LESS - confusion about how mixins take parameters

    How is font-size not working here?

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    How to make device width-height based html & css via PhoneGap

    how to replicate pinterest.com's absolute div stacking layout [closed]

    How to Dynamically create a CSS class using AngularJS