div内的图像没有边距答案

【问题标题】：Image no margin inside a divdiv内的图像没有边距
【发布时间】：2015-08-01 15:26:35
【问题描述】：

在下图中，我有一个黄色 div 内的图像。我不喜欢左边距、右边距和上边距，但我想保留下边距以便以后添加文本，那么如何摆脱这些边距？我仍然想在顶部保留圆角。

http://s16.postimg.org/i1r2kfy5v/Screen_Shot_2015_07_31_at_11_35_27_PM.png

如你所见，代码很简单：

<div>
  <div>
    <a ...><img ...></a>
  </div>
  <div>
    <p>...</p>
  </div>
</div>

==========更新==============

更具体地说，我刚刚创建了一个 jsfiddle 测试：

http://jsfiddle.net/wpp3ejer/5/

所以基本上我希望黄色块的宽度是固定的，但我不想要左/右/顶部填充。没有上边距时，不能把上边角弄圆，也不能去掉右边距。

【问题讨论】：

在底部添加不需要边距的文本，但您可以使用顶部 div 和底部 div 中的 img 结构，您可以添加文本。但如果您提供 jsfiddle 或演示，将很容易。
有很多方法可以实现你想要的视觉效果，但这取决于你的实际代码。请向我们提供更多信息，尤其是您提到的那些元素的 CSS。

标签： html css

【解决方案1】：

overflow: hidden 将有助于在您有图片时保持圆角。检查这个 - JSFiddle

HTML

<div class="photocard">
  <a>
    <img src="http://filepic.ru/file/1438412560.jpg" alt="" />
  </a>
  <p>This is Emely</p>
</div>

CSS

body {
    background-color: lightgray;
}
.photocard {
    background-color: #fffadc;
    display: block;
    width: 364px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 2px 2px 10px 0 rgba(0,0,0,.4);
    box-shadow: 2px 2px 10px 0 rgba(0,0,0,.4);
}
.photocard p {
    text-align: center;
    margin: 0;
    padding: 20px;
}

【讨论】：

这太棒了！我真的很感激。
如果你想为.photocard div 设置一定的宽度，请添加：.photocard a, .photocard img{width: inherit;} 现在你的图像总是和它的容器一样宽。
渲染所有照片后，我发现一些阴影被破坏了。例如，最顶部图片的顶部阴影出现在最底部，而最右侧图片的右侧阴影缺失。你有什么想法吗？

【解决方案2】：

向包含您的图像的 div 添加一个 id 属性。然后将此 css 添加到您的页面：

#yourDivId{
margin-top:0px;
margin-left:0px;
margin-right: 0px;
}

【讨论】：

【解决方案3】：

您可以查看以下链接。我已经为你提供了图像 div 并为其设置了样式。

http://jsfiddle.net/4wz688o1/8/

.hello{
margin:0px 0px 100px 0px;

}

【讨论】：