相关疑难解决方法(0)

为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.

图像下方的间隙或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

如何清除图像底部和包装器之间的空间,同时将图像保持为内联块？为什么会这样？

http://jsfiddle.net/dJVxb/2/

HTML:

<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >                 
</div>

CSS:

?#wrapper {
    background:green;
}
img {
    display:inline-block; 
    margin:0;
}

我刚刚更改了我网站上的标题图片

<div style="background-image... width=1980 height=350>

使用

<img src="... style="width:100%;">

所以图像会缩小它现在所做的...

但现在我有这个神秘的10px差距左右.

我已经检查了Chrome中的检查员,我只是看不出是什么造成了空间.我搜索了其他帖子,但找不到任何适用的内容.

有人知道吗？感谢任何帮助,鲍勃:)

为什么图像的父div在底部有一些额外的像素.如何在没有硬代码父div高度的情况下删除像素.

http://jsfiddle.net/6x8Dm/

HTML

<div class="wrapper">
    <div class="column">
        <img src="http://www.lorempixel.com/200/200/" />
    </div>    
</div>  

CSS

.wrapper {
    width:200px;
    margin:0 auto;
}
.column {
    width:100%;
    background:#cc0000;
}

img {
    width:100%;
}

我有几个div(class="badge")在垂直显示.不知道为什么我在FF和IE中的2 div之间有额外的空间(Chrome工作正常).

我需要它们在所有浏览器中显示无空间或相等空间.

http://jsfiddle.net/2hxak/1/

HTML:

<div class="stat-badges">
    <div class="badge">
        <div class="stat-num">123456</div>
    </div>
    <div class="badge">
        <div class="stat-num">0</div>
    </div>
</div>

CSS:

.stat-badges {
  text-align: center;
  width: 55px;
}
.badge {
  display: inline-block;
  padding: 2px 4px;
  color: #ffffff;
  vertical-align: baseline;
  white-space: nowrap;
  background-color: #999999;
}
.badge .stat-num {
  max-width: 30px;
  min-width: 20px;
  padding: 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果我删除,空间将消失overflow: hidden;.我一直overflow: hidden用ellipse裁剪长文本.

当我添加

overflow:hidden

到我页面上的任何按钮，它将在按钮底部创建13px的边距。当我删除上述CSS时，边距消失了，但是按钮内的某些内容溢出了。

我如何才能去除底部的边距，同时保持

overflow:hidden

CSS样式？

与 overflow:hidden

没有 overflow:hidden

，但是Facebook徽标会溢出到下一个按钮中（这是一种自定义字体）

当前的按钮CSS：

.btn {
    background-color: #FF6347;
    border: 1px solid #CC4F39;
    color: #FFFFFF;
    text-decoration: none;
    padding: 7px 15px;
    cursor: pointer;
    font-size: 1em;
    text-shadow: 0 1px 2px #000000;
    display: inline-block;
    overflow: hidden;
}

当前按钮HTML：

<a class="btn btn-fb btn-xl" id="login_fb"><span class="icon-socialfacebookvariant"></span>Log In</a>

当前的FACEBOOK徽标CSS：

[class^="icon-"], [class*=" icon-"] {
    overflow:hidden;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:2em;
    line-height:0;
    font-family: 'icomoon';
    position:relative;
    top:-1px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none; …

我正在创建一个列表<ul>,但我需要它"团结".即使我删除了所有边框,填充和边距,它仍然在图像之间创建一个空格.我该如何删除它？

<h4>An Unordered List:</h4>
<ul>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
</ul>
<ul>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
</ul>

CSS

ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border:  0px 0px 0px 0px;
    display: table;
    table-layout: fixed;
    display: inline;
}

li {
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;  
    display: table-cell;

}

http://jsfiddle.net/xarq5/

 <div id="hello">
      <ul>
          <li>Hello</li>
          <li>Hello</li>
      </ul>
 </div>

和上面的HTML的CSS

  #hello{
     margin:0px;
     padding:0px;
     border:1px solid black;
     float:left;
  }
  #hello ul{
      position:relative;
      display: inline-block;
      list-style:none;
      margin:0px;
      padding:0px;
  } 
  #hello li{
       float:left;
  }

对于上述html和CSS，我总是为ul元素获得额外的5px边距。

在仔细检查我的代码中的每个css语句并编写上面的示例后，我发现问题出在

    display:inline-block;
    or
    display:inline-table;

解决这个问题的正确方法是什么？

其他一些论坛建议使用

“为父容器设置字体大小：0；对于子容器设置字体大小：your_size；”

是否有其他解决方案可以防止这种情况发生，所以我的字体大小0不会降级为子级。

谢谢你斯里坎特