两个< img>没有间距 [英] Two <img> without spacing
问题描述
< HTML>
< head>
< meta name =viewportcontent =width = device-width/>
< title> HAHAHA< / title>
< STYLE TYPE =text / cssmedia =screen>
*
{
padding：0;
保证金：0;
}
body
{
padding：0;
保证金：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.jpgwidth =100pxstyle =padding：0; margin：0;/>
< img src =1.jpgwidth =100px/>
< img src =1.jpgwidth =100px/>
< / div> - >
< img src =http://is.gd/kjxtjstyle =padding：0; margin：0; border：0;/>
< img src =http://is.gd/kjxtjstyle =padding：0; margin：0; border：0;/>
< / BODY>
< / html>
为什么这些图片在它们之间始终有一个小空间，即使我有填充&在页面上body和所有其他元素的边距设置为0？
OK这是完整的未经编辑的代码。
编辑：刚刚发现它的两个IMG之间的换行符。
SO ...我不能在两个元素之间按下输入？ lol ...：）
默认显示图像 inline ，这可能是你的问题。 HTML中的空白字符是浓缩的，但它们仍然会显示为一个空格（如果存在于HTML元素之间）。
以下HTML将在图像之间留出一点空白。
< div class =images>
< img src =http://placehold.it/400x300/>
< img src =http://placehold.it/400x300/>
< / div>
如果您想使它们相互平齐，可以尝试将图像浮动：
img {
float：left;
}
如果您不熟悉CSS，浮动会带来自己的问题。 p>
另一种方法是调整标记以消除额外的空格字符。一个常见的做法叫做fishy语法：
< div class =images
> ;< img src =http://placehold.it/400x300
/>< img src =http://placehold.it/400x300
/>< / DIV>
它的工作方式是收盘> < 字符之前，这样在任何HTML元素中都没有空白作为内容。相反，用于缩进的空格在HTML标记内，其中空格被完全忽略。
有一个 white-space 上的新属性的w3c功能请求 ，这在理论上可以让CSS从元素中移除所有的空格。 orignal方案是 white-space：ignore; 但是我更喜欢（和建议） white-space：none; 。
然而，似乎更新 white-space 不太可能发生，相反，建议是使用flexbox适当地删除空格：
扩展了原始HTML示例：
.images {
display：flex;
}
当然，flexbox有足够的跨浏览器支持在商业环境中有用，所以暂时我建议坚持使用鱼腥的语法。
<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>
Why do these images always have a small space in between them, even if i have padding & margin set to 0 on body and all other elements in page?
OK this is the full unedited code.
EDIT: just found out its the line break between the two IMG. SO... i cannot press enter between the two elements? lol... :)
images are displayed inline by default, which is likely your issue. White-space characters in HTML are condensed, however they will still appear as a space if any exist between HTML elements.
The following HTML will render with a slight space between images.
<div class="images">
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/400x300" />
</div>
If you'd like to make them flush against each other, you could try floating the images:
img {
float: left;
}
Floating comes with its own issues if you're new to CSS.
An alternative is to adjust the markup to get rid of extra white-space characters. A common way to do this is called "fishy" syntax:
<div class="images"
><img src="http://placehold.it/400x300"
/><img src="http://placehold.it/400x300"
/></div>
The way it works is that the closing > character of each element is moved to just before the beginning < character such that there's no white-space within any HTML element as content. Instead, the white-spaces for indentation are within the HTML tags, where the white-space is ignored completely.
There was a w3c feature request for a new property on white-space, which could theoretically allow CSS to remove all spaces from an element. The orignal proposal was white-space: ignore; however I much prefer (and suggested) white-space: none;.
It appears, however, that updating white-space is not likely to happen, and instead the suggestion was to use flexbox to remove spaces appropriately:
.images {
display: flex;
}
Of course, it will be some time before flexbox has enough cross-browser support to be useful in a commercial environment, so for the time being I recommend sticking with the fishy syntax.
这篇关于两个< img>没有间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
