html - 如何删除不需要的边距

Question

我有一个 HTML 列表，并按列宽分隔它们。但是每列之间有一个我不知道如何删除的空格。对我来说似乎无法访问。我希望它像没有任何空间的行，或者至少我选择空间的大小。

这是我的 ul 代码

ul {
height:400px;
background-color:#666;
list-style-type: none;
-webkit-column-width:200px;
}

这是演示：http: //jsfiddle.net/KjcKR/3/

Answer 1

将以下内容添加到您的 CSS

margin:0;
padding:0;

一些浏览器仍会在某些块级元素周围显示一些边距。如果您的边距仍然显示，请为其添加一个浮点值。

Answer 2

将以下内容添加到 UL 样式中。

-webkit-column-gap:0px;

Answer 3

还有一个技巧（不确定它是否适用于所有浏览器）：

http://jsfiddle.net/KjcKR/12/

li {
    display:inline-block;
    width:220px;
    height:180px;
    padding:10px -10px 10px 10px;
    background-color:#CCC;
    margin:0px;
    float:left;

}

应该删除 webkit-column-width 以便在 chrome 中正常工作。

Answer 4

我可以试试这个吗

http://jsfiddle.net/KjcKR/3/

CSS

li {
    display:inline-block;
    width:220px;
    height:180px;
    padding:10px;
    background-color:#CCC;
    margin:0px;
    float:left;

}