Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Css Menu Has Odd Left Margin

Post a Comment
I have this CSS code for a horizontal menu: .vertical-nav { height:auto; list-style:none; width: 100%; /******* MODIFIED ********/ margin-top:0; margin-bottom:3

Solution 1:

Actually it isn't margin.

Web browsers apply a padding-left on HTML list elements such as <ul>(Google Chrome set -webkit-padding-start: 40px;).

You could override the user agent stylesheet by setting padding: 0; on <ul> element:

.vertical-nav {
    padding: 0;
}

Here is the JSFiddle Demo

Note: There's also a margin: 8px; applied on <body> element by web browsers, you could reset the margin by:

body {
    margin: 0;
}

What is the best practice?

Different browsers may have different behavior. they apply several CSS declaration on HTML elements by default. they adds margin, padding, text-decoration and so on.

To get rid of this, most web developers use some CSS declarations called CSS Reset to override the browser's default stylesheet, as a start point.

Take a look at Legendary Eric Meyer's CSS Reset.

Solution 2:

add padding: 0; to the unordered list.

Post a Comment for "Css Menu Has Odd Left Margin"