使用内联表或内联块时，额外边距为5px [英] Additional margin of 5px when inline-table or inline block is used
问题描述
< div id =hello>
< ul>
< li>您好< / li>
< li>您好< / li>
< / ul>
< / div>
并且css用于上述html
#hello {
margin：0px;
padding：0px;
border：1px solid black;
float：left;
}
#hello ul {
position：relative;
display：inline-block;
list-style：none;
margin：0px;
padding：0px;
}
#hello li {
float：left;
}
对于上述html和css，我总是获得额外的5px ul元素。
从我的代码逐行处理每个css语句并编写上面的示例后，我发现问题是由于
display：inline-block;
或
display：inline-table;
是什么是正确的方法来实现这一目标？
其他一些论坛建议使用
为父容器设置font-size：0;为儿童设置font-size：your_size;
有没有其他解决方案来防止这种情况，所以我的字体大小为0不会级联到孩子。
谢谢you
Srikanth
请尝试 http://jsfiddle.net/xarq5/10/
#hello {
float：left;
}
和
#hello ul {
float：left
}
$ b b
说明：每当您有包含其他浮动元素的html元素时，包含元素就不会完全包含浮动元素，除非它是浮动元素。
注意：与此答案不同，您可以将您的html缩进，因为它是（即不担心间距或缺乏）：
< body&
< div id =hello>
< ul>
< li>您好< / li>
< li>您好< / li>
< / ul>
< / div>
< / body>
<div id="hello">
<ul>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
And css for the above html
#hello{
margin:0px;
padding:0px;
border:1px solid black;
float:left;
}
#hello ul{
position:relative;
display: inline-block;
list-style:none;
margin:0px;
padding:0px;
}
#hello li{
float:left;
}
For the above html and css, I always get a additional 5px margin for the ul element.
After meticulously going though each css statements line by line from my code and writing the above example, I was able to find that the problem was due to
display:inline-block;
or
display:inline-table;
What is proper way to over come this?
some other forums suggest to use
"Set font-size: 0; for parent container and font-size: your_size; for children."
Is there any other solution to prevent this so that my font size of 0 doesn't cascade down to children.
Thank you Srikanth
try http://jsfiddle.net/xarq5/10/
#hello{
float: left;
}
and
#hello ul {
float: left
}
explanation: whenever you have an html element that's containing other floating elements, the containing element doesn't fully "contain" the floating elements unless if it's floated itself..
note: unlike this answer you can keep your html indented as it was (ie don't worry about spacing or the lack thereof):
<body>
<div id="hello">
<ul>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</body>
这篇关于使用内联表或内联块时，额外边距为5px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
