图像之间引入空间 [英] Space introduced between images
问题描述
如果我将三个图像彼此相邻（每个图像都在锚标记内），它们都会按预期水平排列，两者之间没有空格。也就是说，他们彼此相互冲击。
然而，在我的设计中，我需要将它们布置成这样：
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
（每个字母，X，o和L代表不同的图像。）
图像之间应该没有任何空间。
我尝试了几种不同的方法来使用它，< div> s，浮动
属性和表。我已经设置了指定保证金的CSS规则：0，填充：0
和border：none。我已经确定XHTML
代码本身没有多余的空格。我还确保文档验证为XHTML 1.0严格。
无论我做什么，图像的排列都会在它们之间留出空间。
在Mozilla 1.7.3 for PC中，两个正确的图像和IE之间存在差距
6所有图像之间存在差距。
如何让这些图像之间没有任何空间？
我们非常感谢任何帮助。
代码如下。
====================================== ============ ==================================
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http：//www.w3.org/ TR / xhtml1 / DTD / xhtml1-strict.dtd">
< html xmlns =" http：//www.w3.org/1999/xhtml">
< head>
< title> MTC - <！ - #include virtual =" include / sectionTitle.htm" - >< / title>
<！ - #include virtual =" /include/headElements.htm" - >
< / head>
< body>
< p class =" invisible" >< a href ="＃features">跳过导航链接< / a>< / p>
< p class =" invisible">< ; id =" top" name =" top">< / a>< / p>
< div id =" headlineleft">
< ; a href =" audio / audio.htm" class =" unmarked">< img src =
" ../ images / headline_audio.jpg" alt =" Streaming Audio - 收听MTC委员会
会议" />< / a>
< / div>
< div>
< a href = " press_releases /"类= QUOT;未标记" id =" headlinetopright">< img src =
" ../ images / headline_news2.jpg" alt =" MTC新闻稿" />< / a>
< br />
< a href =" headlines.htm"类= QUOT;未标记" id =" headlinebottomright">< img src =
" ../ images / headline_news3.jpg" alt =" Transportation Headlines" />< / a>
< / div>
< p>< img src =" ../ images / bar_features .gif要点" ALT ="特点和QUOT; />< / p>
< / body>
< / html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
a＃headlinebottomright {
保证金：0;
填充：0;
border：none;
}
div #headlineleft {
保证金：0;
填充：0;
border：none;
float：left;
}
a＃headlinetopright {
margin：0;
padding：0;
border：none;
}
a，
a：link，
a：活跃，
a：访问{
border-bottom：solid 1px;
text-decoration：none;
}
a：悬停{
border-bottom：none;
text-decoration：none;
}
身体{
填充：4px;
}
div＃navbardiv {
宽度：132px;
填充底部：12px;
背景颜色：＃E3E7EE;
}
div＃navbardiv a {
border：none;
background：none;
text-decoration：none;
}
div＃navbardiv p {
宽度：120px;
保证金：0 4px 2px 4px;
填充：0;
font-family：Arial，Helvetica，sans-serif;
font-size：12px;
}
div＃navbardiv ul {
保证金：0;
填充：0;
}
div＃navbardiv ul li {
padding：0 4px 0 6px;
margin：0;
display：list-item;
list-style-position：inside;
list-style-type：disc;
font-family：Arial，Helvetica，sans-serif ;
字体大小：12px;
行高：14px;
}
表格#search input {
保证金：0;
填充：1px;
border：solid 1px＃000000;
background-颜色：#CCCCCC;
颜色：＃EC2F00;
字体大小：10px;
}
h1 {
font-size：large;
}
h1，h2，h3，h4，h5，h6，p {
保证金：12px 0 0 0;
padding：0;
font-family：Arial，Helvetica，sans-serif;
}
h2 {
字体大小：中等;
}
h3 {
字体大小：小;
}
h4 {
填充：2px 4px 2px 4px;
背景颜色：＃6B8EBD;
颜色：#FFFFFF;
font-size：x-small;
text-transform：uppercase;
}
h5 {
填充：2px 4px 2px 4px;
背景颜色：#BDBDBD;
颜色：#FFFFFF;
font-size：x-small;
text-transform：大写;
}
h6 {
font-size：small;
}
hr {
保证金：0;
保证金 - 顶部：8px;
margin-bottom：8px;
填充：0;
border：none;
border-top：solid 1px＃000000;
}
img {
保证金：0;
填充： 0 ;
border：none;
}
li {
保证金：8px 0 8px 0;
填充：0;
font-family：Arial，Helvetica，sans-serif;
font-size：small;
}
p {
字体大小：小;
}
p.invisible {
身高：0;
宽度：0;
显示：无;
颜色：#FFFFFF;
位置：绝对;
溢出：隐藏;
}
表{
border-collapse：崩溃;
}
table＃innercontent {
margin：6px 0 0 0;
padding：0;
border：none;
border-collapse：collapse;
}
table＃innercontent td {
vertical-align：top;
}
table #main {
background-color：#FFFFFF;
}
表#main td {
vertical-align：top; / * border：solid 1px＃cc0000; * /
}
table #main td＃footer {
margin：0;
padding：12px;
border-top：solid 1px＃000066;
text-align：center;
}
table＃ main td＃footer p {
margin：0;
margin-top：6px;
margin-bottom：6px;
填充：0;
颜色：＃000066;
font-family：Arial，Helvetica，sans-serif;
字体-size：10px;
}
table #main td #maincontent {
padding-left：16px;
padding-bottom：20px;
}
table #main td #topbanner {
padding-bottom：6px;
}
table #main td #topbanner a，
div #headlines a {
border：none;
背景：无;
text-decoration：none;
}
table #main td #topbanner img #logo {
保证金权利：12px;
}
td.leftcol {
填充：0 6px 0 0;
}
td.leftcol p，
td.rightcol p {
}
td.leftcol，
td.rightcol {
宽度：221px;
}
td.rightcol {
填充：0 0 0 6px;
}
a.unmarked {
border：none;
background：transparent;
text-decoration：none;
}
文章< 41 ************* ********@news.cablerocket.com> ;, DM
< elektrophyte-yahoo>说...如果我把三个图像放在一起（每个都在一个锚标签内），它们都按预期水平排列，两者之间没有空格。也就是说，他们彼此齐平地坐在一起。
然而，在我的设计中，我需要将它们布置成这样：
XXXXXXXXooooooooo < XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
图像之间应该没有任何空间。
设置行高
永远不要直接发送那么多代码。网址更好。
-
Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>
DM写道：如果我在每个旁边放三张图片其他（每个都在一个锚标签内）
它们都按预期水平排列，它们之间没有空隙。
即，它们正相互齐平。
然而，在我的设计中我需要它们这样布局：
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
（每个字母，X，o和L代表不同的图像。）
Leif K-Brooks写道：
DM写道：
如果我在每个旁边放三张图片（每个都在一个锚标签内）
它们都按预期水平排列，两者之间没有空隙。
即，它们彼此相互齐平。
然而，在我的设计中我需要它们这样布局：
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL < （每个字母，X，o和L，每个字母，X，o和L。表示不同的图像。）
感谢您的回复。我很感激帮助。你的例子中没有包含我原始帖子中出现的
锚标签，但我仍然可以按照你的例子获得
它。
我还不确定为什么要添加空间。即使是现在，它仍然在IE 5中为PC添加了
，但我愿意允许这样做。
dm
If I put three images next to each other (each within an anchor tag) they all
line up horizontally as expected with no space between them. I.e., they''re
sitting flush up against each other.
However, in my design I need them to be laid out like this:
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
(Each letter, "X", "o", and "L" represents a different image.)
There should be no space at all between the images.
I have tried several different ways to get that to work using, <div>s, the float
attribute, and tables. I''ve set up CSS rules that specify margin: 0, padding: 0
and border: none. I''ve made sure there are no extraneous spaces in the XHTML
code itself. I''ve also made sure the document validates as XHTML 1.0 strict.
No matter what I do, the arrangement of images renders with space between them.
In Mozilla 1.7.3 for the PC there''s a gap between the two right images and in IE
6 there is a gap between all the images.
How can I get these images to not have any space between them?
Any help would be greatly appreciated.
Code follows.
================================================== ==================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MTC -- <!--#include virtual="include/sectionTitle.htm" --></title>
<!--#include virtual="/include/headElements.htm" -->
</head>
<body>
<p class="invisible"><a href="#features">Skip navigation links</a></p>
<p class="invisible"><a id="top" name="top"></a></p>
<div id="headlineleft">
<a href="audio/audio.htm" class="unmarked"><img src=
"../images/headline_audio.jpg" alt="Streaming Audio - Listen to MTC committee
meetings" /></a>
</div>
<div>
<a href="press_releases/" class="unmarked" id="headlinetopright"><img src=
"../images/headline_news2.jpg" alt="MTC press releases" /></a>
<br />
<a href="headlines.htm" class="unmarked" id="headlinebottomright"><img src=
"../images/headline_news3.jpg" alt="Transportation Headlines" /></a>
</div>
<p><img src="../images/bar_features.gif" alt="Features" /></p>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
a#headlinebottomright{
margin: 0;
padding: 0;
border: none;
}
div#headlineleft{
margin: 0;
padding: 0;
border: none;
float: left;
}
a#headlinetopright{
margin: 0;
padding: 0;
border: none;
}
a,
a:link,
a:active,
a:visited {
border-bottom: solid 1px;
text-decoration: none;
}
a:hover {
border-bottom: none;
text-decoration: none;
}
body {
padding: 4px;
}
div#navbardiv {
width: 132px;
padding-bottom: 12px;
background-color: #E3E7EE;
}
div#navbardiv a {
border: none;
background: none;
text-decoration: none;
}
div#navbardiv p {
width: 120px;
margin: 0 4px 2px 4px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
div#navbardiv ul{
margin: 0;
padding: 0;
}
div#navbardiv ul li{
padding: 0 4px 0 6px;
margin: 0;
display: list-item;
list-style-position: inside;
list-style-type: disc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
}
form#search input {
margin: 0;
padding: 1px;
border: solid 1px #000000;
background-color: #CCCCCC;
color: #EC2F00;
font-size: 10px;
}
h1{
font-size: large;
}
h1, h2, h3, h4, h5, h6, p {
margin: 12px 0 0 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
h2{
font-size: medium;
}
h3{
font-size: small;
}
h4{
padding: 2px 4px 2px 4px;
background-color: #6B8EBD;
color: #FFFFFF;
font-size: x-small;
text-transform: uppercase;
}
h5{
padding: 2px 4px 2px 4px;
background-color: #BDBDBD;
color: #FFFFFF;
font-size: x-small;
text-transform: uppercase;
}
h6{
font-size: small;
}
hr {
margin: 0;
margin-top: 8px;
margin-bottom: 8px;
padding: 0;
border: none;
border-top: solid 1px #000000;
}
img {
margin: 0;
padding: 0;
border: none;
}
li{
margin: 8px 0 8px 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
p {
font-size: small;
}
p.invisible {
height: 0;
width: 0;
display: none;
color: #FFFFFF;
position: absolute;
overflow: hidden;
}
table {
border-collapse: collapse;
}
table#innercontent{
margin: 6px 0 0 0;
padding: 0;
border: none;
border-collapse: collapse;
}
table#innercontent td{
vertical-align: top;
}
table#main {
background-color: #FFFFFF;
}
table#main td {
vertical-align: top; /* border: solid 1px #cc0000; */
}
table#main td#footer {
margin: 0;
padding: 12px;
border-top: solid 1px #000066;
text-align: center;
}
table#main td#footer p {
margin: 0;
margin-top: 6px;
margin-bottom: 6px;
padding: 0;
color: #000066;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
table#main td#maincontent {
padding-left: 16px;
padding-bottom: 20px;
}
table#main td#topbanner {
padding-bottom: 6px;
}
table#main td#topbanner a,
div#headlines a{
border: none;
background: none;
text-decoration: none;
}
table#main td#topbanner img#logo {
margin-right: 12px;
}
td.leftcol{
padding: 0 6px 0 0;
}
td.leftcol p,
td.rightcol p{
}
td.leftcol,
td.rightcol{
width: 221px;
}
td.rightcol{
padding: 0 0 0 6px;
}
a.unmarked{
border: none;
background:transparent;
text-decoration: none;
}
In article <41*********************@news.cablerocket.com>, DM
<elektrophyte-yahoo> says...If I put three images next to each other (each within an anchor tag) they all
line up horizontally as expected with no space between them. I.e., they''re
sitting flush up against each other.
However, in my design I need them to be laid out like this:
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL There should be no space at all between the images.
Set line-height
Never send that much code directly. URL is better.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
DM wrote:If I put three images next to each other (each within an anchor tag)
they all line up horizontally as expected with no space between them.
I.e., they''re sitting flush up against each other.
However, in my design I need them to be laid out like this:
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
(Each letter, "X", "o", and "L" represents a different image.)
Leif K-Brooks wrote:
DM wrote:If I put three images next to each other (each within an anchor tag)
they all line up horizontally as expected with no space between them.
I.e., they''re sitting flush up against each other.
However, in my design I need them to be laid out like this:
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
(Each letter, "X", "o", and "L" represents a different image.)
Thanks for the reply. I appreciate the help. Your example doesn''t include the
anchor tags which were present in my original post, but I was still able to get
it to work following your example.
I''m still not sure why space was being added. Even now, it''s still being added
in IE 5 for the PC, but I''m willing to allow that.
dm
这篇关于图像之间引入空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
