<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>HAHAHA</title>
<STYLE TYPE="text/css" media="screen">
*
{
padding: 0;
margin: 0;
}
body
{
padding: 0;
margin: 0;
}
#flexbox
{
//display: -webkit-box;
//-webkit-box-orient: horizontal;
//-webkit-box-align: stretch;
//width: auto;
}
</STYLE>
</head>
<BODY style="padding:0;margin:0;border:0;">
<!--<div id="flexbox">
<img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
<img src="1.jpg" width="100px"/>
<img src="1.jpg" width="100px"/>
</div>-->
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
</BODY>
</html>
为什么这些图像之间总是有一个小空间,即使我在主体和页面中的所有其他元素上设置了填充和边距为0？
好的,这是完整的未经编辑的代码.
编辑:刚刚发现它在两个IMG之间的换行符.所以......我不能在两个元素之间输入？大声笑... :)
我不能按两个元素之间的输入？大声笑... :)
在HTML的大多数部分中,没有什么区别于一种类型的空白区域.
但是,您可以格式化代码:
<img src="..." alt="..."
><img src="..." alt="...">
...删除元素之间的空间.
默认情况下显示图像inline，这可能是您的问题。HTML 中的空白字符会被压缩，但如果 HTML 元素之间存在空格，它们仍然会显示为空格。
以下 HTML 将在图像之间呈现微小的间距。
<div class="images">
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/400x300" />
</div>
如果您想让它们彼此齐平，您可以尝试浮动图像：
img {
float: left;
}
如果您是 CSS 新手，浮动会带来自己的问题。
另一种方法是调整标记以消除多余的空白字符。执行此操作的常见方法称为“可疑”语法：
<div class="images"
><img src="http://placehold.it/400x300"
/><img src="http://placehold.it/400x300"
/></div>
它的工作方式是将>每个元素的结束字符移动到开始<字符之前，这样任何 HTML 元素中就不会出现空白作为内容。相反，用于缩进的空格位于 HTML 标记内，其中空格将被完全忽略。
有一个w3c 功能请求，要求在 上添加一个新属性white-space，理论上它可以允许 CSS 删除元素中的所有空格。white-space: ignore;然而，我更喜欢（并建议）最初的提案white-space: none;。
然而，更新似乎white-space不太可能发生，相反，建议使用 flexbox 来适当删除空格：
.images {
display: flex;
}
当然，Flexbox 还需要一段时间才能拥有足够的跨浏览器支持以在商业环境中发挥作用，因此暂时我建议坚持使用可疑语法。
| 归档时间： |
|
| 查看次数： |
2467 次 |
| 最近记录： |