Html UL 是否有默认边距或填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30424248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does UL have default margin or padding
提问by JZeig1
This might seem like a dumb question, but I've added an UL to a basic page and the list seems to be off-centered. There's nothing special about the list. No specific css added: just a list. When I load live it's slightly off center.
Is there a default margin or padding on the left side?
这似乎是一个愚蠢的问题，但我已将 UL 添加到基本页面，并且列表似乎偏离了中心。名单没有什么特别之处。没有添加特定的 css：只是一个列表。当我实时加载时，它稍微偏离了中心。
左侧是否有默认边距或填充？
<h3>Title Heading</h3>
<ul id="listItems">
<li>itemOne</li>
<li>itemTwo</li>
<li>itemThree</li>
</ul>
The main body has all the css code for centering, aligning, float, etc. The 'Title Header' align perfectly. Just list is a little off.
主体具有用于居中、对齐、浮动等的所有 css 代码。“标题标题”完美对齐。只是列表有点不对。
Thank you.
谢谢你。
Oh, don't know if this is important, but I added the 'id' cause... wanted to use 'first-of-type' to give 1st item em(bold).
哦，不知道这是否重要，但我添加了 'id' 原因...想使用 'first-of-type' 给第一个项目 em（粗体）。
回答by Michael Wilson
The problem is that by default, browsers have custom css - in chrome for example:
问题是默认情况下，浏览器具有自定义 css - 例如在 chrome 中：
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:
您必须为您的 使用自定义规则ul：
element.style {
margin-left: 0px;
/* set to 0 if your not using a list-style-type */
padding-left: 20px;
}
回答by Coop
Lists will always align so the text remains in line with the edge of the parent element. This means the bullet points will by default sit outside (to the left) of the element. You can force the alignment to happen to the bullet point, not the text like so:
列表将始终对齐，因此文本与父元素的边缘保持一致。这意味着默认情况下，项目符号将位于元素的外部（左侧）。您可以强制对齐发生在项目符号上，而不是像这样的文本：
ul {
list-style-position: inside; }
Alternatively you can just add your own margin to push the entire list element like so:
或者，您可以添加自己的边距来推送整个列表元素，如下所示：
ul {
margin-left: 20px; }
