删除 img 顶部的额外边距答案

【问题标题】：remove extra margin at top of img删除 img 顶部的额外边距
【发布时间】：2013-09-07 15:50:15
【问题描述】：

如何使 img 转到父 div 的最顶部？顶部似乎总是有一个额外的 px 行。在小提琴中，图像在 div 之外向下移动，而不是很好地适合内部。它们的高度相同。

在某些情况下，img 比 div 短，在这种情况下，它应该居中，其上方和下方的父背景数量相等。

.wrapper{
     width: 140px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    background:red;
    padding:0px;
}


img{
   max-height:110px; 
     max-width:140px; 
     vertical-align: middle;
     margin:0px;
     border:0;  
}

<div class = "wrapper"><img src = 'http://images.tastespotting.com/thumbnails/650041.jpg' alt ="" /></div>

【问题讨论】：

这些是 p 元素的默认填充和边距，您将使用重置 CSS 来消除所有默认浏览器样式。但是，快速解决方法是p { padding: 0; margin: 0;}
@MitchellLayzell 这不是困扰 OP 的空间
如果您找到有帮助的答案，请投票并接受。
@koala_dev 如果他在谈论图像顶部的 1px，再次重置 CSS 将修复它，但快速修复将是 img { display: block;}
@Mitchell Layzell 不幸的是它破坏了对齐。 jsfiddle.net/6n9hr

标签： html css

【解决方案1】：

div中似乎有隐藏文本（即空格/换行符）。

尝试为.wrapper div 添加font-size:0。 http://jsfiddle.net/y3mNX/

【讨论】：

【解决方案2】：

减少行高：100px；在 .wrapper 类中

.wrapper{
width: 140px;
height: 110px;
line-height: 100px;
text-align: center;
background:red;
border:0;

}

【讨论】：

【解决方案3】：

将padding-bottom:5px; 添加到您的 .wrapper css 类中

这里是Fiddle

即。

.wrapper{
  width: 140px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background:red;
  padding-bottom:5px;
}

【讨论】：