Does UL have default margin or padding
The problem is that by default, browsers have custom css - in chrome for example:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
You'll have to use a custom rule for your ul
:
element.style {
margin-left: 0px;
/* set to 0 if your not using a list-style-type */
padding-left: 20px;
}
Why ul adds extra top margin?
The margin on the <ul>
comes from the default styling that a browser adds to the element. For example if you open Chrome's DevTools and inspect the <ul>
element you'll see styling like this. The user agent stylesheet refers to the browsers default styling. 1em
of margin becomes 16px
as the browser has a font-size: 16px
by default.
As the default styling isn't the same between browsers a common technique is to use a reset stylesheet, like Eric Meyer's Reset CSS or Nicolas Gallagher's normalize.css, to reduce these browser inconsistencies.
UL has margin on the left
The <ul>
element has browser inherent padding & margin by default. In your case, Use
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
or a CSS browser reset ( https://cssreset.com/ ) to deal with this.
There is margin of the ul to the div
What you're seeing is this:
It is a visual representation of the box model, Safari will show you this in the style inspector. I find Chrome a little clearer when displaying CSS information.
Remove padding from ul in css
Is this what you mean?
#navigation ul{
padding: 0;
}
Does the html element have a default margin or padding in any browser, since normalize.css doesn't reset it?
The <html>
tag does not have any CSS rules automatically applied to it. You can apply styles if you like, but the only time I've ever done it is to get 100% height and width.
Default styling for each browser:
http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
http://www.iecss.com/
Related Topics
How to Make an Element Width: 100% Minus Padding
Best Way to Center a ≪Div≫ on a Page Vertically and Horizontally
How to Divide Div Color With 30% Different Color and 70% Different Color in Vertical Using CSS
Htmlspecialchars() Expects Parameter 1 to Be String Array Given
Applying an Ellipsis to Multiline Text
How to Set the Height of an Outer Div to Always Be Equal to a Particular Inner Div
How Wide Is the Default '≪Body≫' Margin
A Div With Auto Resize When Changing Window Width\Height
How to Get the Client Ip Address from Browser in Angular (Typescript)
Position: Sticky Buttons Not Working in Ie 11
How to Style the Option of an HTML "Select" Element
Can't Scroll to Top of Flex Item That Is Overflowing Container
How to Vertically Align Elements in a Div
How to Center Text (Horizontally and Vertically) Inside a Div Block
Auto Detect Mobile Browser (Via User-Agent)
How to Create a Link to a Local File on a Locally-Run Web Page
How to Adjust the Width of the Input Field Based on the Placeholder Text