相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

我有以下HTML:

    <ul>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
    </ul>

以及以下css规则:

        ul {
            padding: 0;
            border: solid 1px #000;
        }
        li {
            display:inline-block;
            padding: 10px;
            width: 114px;
            border: solid 1px #f00;
            margin: 0;
        }

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

出于某些奇怪的原因,列表项在Firefox和Chrome中都会显示边缘.查看firebug,列表项目根本没有任何边距,但它们之间似乎存在空隙.

如果我稍后通过javascript使用添加更多列表项

$('<li><div>added via js</div></li>').appendTo($('ul'));

新元素周围没有出现"边距":

怎么知道这里到底发生了什么？

在ERb序列的末尾使用' - '(减号)有什么意义？

例:

<% 3.times do -%>
  FooBar<br />
<% end -%>
Sometext

无论我是否使用" - ",浏览器都会呈现相同的输出.

谢谢,Aplha.

如何摆脱列表项之间的空白区域？我试图让图像紧挨着彼此.即使我已经设置了样式margins: 0;,它们仍然是分开的.

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>

jsFiddle Demo

我似乎无法弄清楚为什么使用display:inline-block会导致此<div>元素以某种方式在隐藏其包含元素时获得高度.这不会发生display:block.

HTML:

<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>

为什么会display:inline-block造成这里描述的差距？

DEMO

请仔细阅读问题.它与如何删除内联块元素之间的空间不同.

请考虑以下示例:

HTML:

body {
  /* font-family: Arial; */
}

.my-class {
  display: inline-block;
  margin: 0 0 0 -4px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 20px;
}

CSS:

<div>
  <button class="my-class">Hello</button>
  <button class="my-class">Stack</button>
  <button class="my-class">Overflow</button>
</div>

产生:

但是,如果我补充:

body {
  font-family: Arial;
}

它导致第二个和第三个按钮之间的空间为1px:

现在的问题是:为什么增加font-family的body影响按键之间的空间？

这里的游乐场

可能重复:
内联块列表项之间的空格

我有一个我的HTML代码的JSFiddle演示.这是这里的代码:

<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>?

我遇到的问题是在Hello World中'o'和'r'之间插入了一个额外的空间!该display样式设置为无,所以有人告诉我怎样才能得到Hello World!,而没有空间句话？

我有这样的布局:小提琴链接

在.td之间是一些空白区域,即使margin和padding设置为0.

为什么会发生这种情况以及如何解决这个问题？可能会留下负边际？还是更好的解决方案？

<style>
.tr {
    height: 20px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    word-spacing: 0;
}
.td {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div>
    <div class="td" style="width: 50px; background-color: #AAA;"></div>
    <div class="td" style="width: 50px; background-color: #666;"></div>
</div>

所以我正在研究一个涉及克隆一些对象并将它们附加到同一个父对象的项目,然后我为这些对象设置动画,但我的计算似乎总是关闭,我意识到这是因为内联块项目总是有尾随空格,没问题,但是当我使用jQuery将一个克隆项附加到父div时,不包含尾随空格,这会使事情变得非常不一致并且难以使用.

当使用浏览器工具检查元素时,元素声称是相同的,设置边距和填充没有区别,这是一个错误还是我只是遗漏了什么？下面是一个复制结果的简单演示

https://jsfiddle.net/kd5opn7j/2/

$('ul').find('li').each(function(){
  $('ul').append($(this).clone());
});

li {
  display: inline-block;
  width:50px;
  height:50px;
  background: #555;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

我正在使用CSS列布局模块创建流畅的布局,当2个或更多元素位于列的同一"行"时,我看到意外的结果.元素之间将出现3到4 px的间隙.我已经在IE11,FireFox 24,Chrome 31和Safari 5.1.7中进行了测试,它们都表现出相同的行为.

<div class="tile-container">
    <div class="tile-large">1</div>
    <div class="tile-wide">2</div>
    <div class="tile-small">3</div>
    <div class="tile-small">4</div>
    <div class="tile-small">5</div>
    <div class="tile-small">6</div>
    <div class="tile-wide">7</div>
    <div class="tile-large">8</div>
</div>

.tile-container {
    -moz-column-width: 250px;
    -webkit-column-width: 250px;
    column-width: 250px;
    column-fill: auto;
    height: 502px;
    background-color: gray;
}

.tile-large {
    width: 250px;
    height: 250px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: green;
}

.tile-wide {
    width: 250px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: blue;
}

.tile-small {
    width: 125px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: …

我希望有几个块元素彼此相邻,它们采用完整的浏览器宽度.

有了white-space: nowrap它,它工作得很好,但在一个元素和另一个元素之间有一些像素的随机空间:

body { margin: 0; padding: 0; }
#container1 { white-space: nowrap; position: absolute; width: 100%; }
#container1 div { display: inline-block; width: 100%; height: 200px; }

<div id="container1">
    <div style="background: red;"></div>
    <div style="background: yellow;"></div>
    <div style="background: green;"></div>
    <div style="background: blue;"></div>
</div>

这是jsBin演示.

它没有填充,没有边距,没有边框,没有偏移.

这是我的代码:http://jsfiddle.net/spadez/FbADY/11/

尽管我使用此代码:

 * {
    margin:0;
    padding:0;
}

物品之间似乎仍有空隙.在Google Chrome开发人员栏中,它表示他们没有边距或填充来导致它.