Unordered List ul default indent

Question

Can anyone tell me why an unordered list has a default indent padding applied to it  Can this be solved with a CSS Browser Reset

User · Answer

As to why  no idea   A reset will most certainly fix this   ul   margin  0  padding  0

User · Answer

I found the following removed the indent and the margin from both the left AND right sides  but allowed the bullets to remain left-justified below the text above it   Add this to your css file   ul noindent       margin-left  5px      margin-right  0px      padding-left  10px      padding-right  0px      To use it in your html file add class  noindent  to the UL tag   I ve tested w FF 14 and IE 9   I have no idea why browsers default to the indents  but I haven t really had a reason for changing them that often

User · Answer

It has a default indent padding so that the bullets will not end up outside the list itself   A CSS reset might or might not contain rules to reset the list  that would depend on which one you use

User · Answer

If you don t want indention in your list and also don t care about or don t want bullets  there is the CSS-free option of using a  definition list   HTML 4 01  or  description list   HTML 5    Use only the non-indenting definition  lt dt gt  tags  but not the indenting description  lt dd gt  tags  neither of which produces a bullet    lt dl gt     lt dt gt Item 1 lt  dt gt     lt dt gt Item 2 lt  dt gt     lt dt gt Item 3 lt  dt gt   lt  dl gt    The output looks like this   Item 1 Item 2 Item 3

User · Answer

When reseting the  Indent  of the list you have to keep in mind that browsers might have different defaults  To make life a lot easier always start off with a  Normalize  file   The purpose of using these CSS  Normalize  files is to set everything to a know set of values and not relying on what the browser s defaults  Chrome might have a different set of defaults to say FireFox  This way you know that your pages will always display the same no matter what browser you are using  and you know the values to  Reset  your elements   Now if you are only concerned about lists in particular I would not simply set the padding to 0  this will put your bullets  Outside  of the list not inside like you would expect    Another thing to keep in mind is not to use the  px  or pixel unit of measurement  you want to use the  em  unit instead  The  em  unit is based on font-size  this way no matter what the font-size is you are guaranteed that the bullet will be on the inside of the list  if you use a pixel offset then on larger font sizes the bullets will be on the outside of the list   So here is a snippet of the  Normalize  script I use  First set everything to a known value so you know what to set it back to   ul     margin  0     padding  1em     Set the distance from the list edge to 1x the font size       list-style-type  disc     list-style-position  outside     list-style-image  none

User · Answer

I ll tackle your second question first  Yes  the indentation can be reset by using a browser reset like Eric Meyers  Or a simple ul   margin  0  padding  0   as indentation is  by default  enforced on the ul element   As to the why  I suspect its to do with the current level of nesting  as unordered lists allow for nesting or maybe to do with the bullets positioning    Edit  As Guffa mentioned  the list indentation is to ensure that the markers do not fall off the left edge

User · Answer

Most html tags have some default properties  A css reset will help you change the default properties   What I usually do is     padding  0  margin  0  font-face Arial     Although the font is up to you

User · Answer

Typical default display properties for ul  ul       display  block      list-style-type  disc      margin-before  1em      margin-after  1em      margin-start  0      margin-end  0      padding-start  40px

[html] Unordered List (<ul>) default indent

Examples related to html

Examples related to css