Question

所以我要做的就是让它在图像之间平均而不是直接在图像之上。问题在于我在图像周围使用边距。相关的css和html：

#infobox_picture {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
padding-bottom: 14px;
background-position: center bottom;
background-repeat: no-repeat;
height: 90px;
}

<div id="infobox_picture">
<img src="images/image1.png" width="91" height="90" align="left"  class="frame-img">
 </div>
 <div id="infobox_picture">
 <hr >
  <img src="images/image1.png" width="91" height="90" align="left"         class="frame-img">
  </div>
     <div id="infobox_picture">
  <hr />
<img src="images/image1.png" width="91" height="90" align="left"         class="frame-img">
 </div>

Answer 1

首先，使用类，而不是div的id：

.infobox_picture {

和

<div class="infobox_picture">

定义顶部＆amp;底部填充，而不是顶部和底部您的div的底部边距（反之亦然，取决于您希望元素的行为方式）。

Answer 2

如果您想要水平线作为视觉效果，则不需要<hr>标记。

您可以使用伪元素尝试以下操作。

如果侯有

<div class="infobox_picture">
    <img src="http://placehold.it/91x90" width="91" height="90">
</div>
<div class="infobox_picture">
    <img src="http://placehold.it/91x90" width="91" height="90">
</div>
<div class="infobox_picture">
    <img src="http://placehold.it/91x90" width="91" height="90">
</div>

对于CSS：

.infobox_picture {
    margin: 0 auto 15px 10px;
    background-color: beige;
    height: 90px;
    position: relative;
}
.infobox_picture ~ .infobox_picture:before {
    content: '';
    position: absolute;
    left: 0;
    top: -8px;
    width: 100%;
    border-top: 1px solid black;
}

在.infobox_picture之后为第一个.infobox_picture块之后的所有top块创建一个伪元素。

伪元素的顶部边框为1px，{{1}}偏移量为底部边距的一半（加上一个像素或顶部边框的宽度）。

请参阅演示：http://jsfiddle.net/audetwebdesign/uuWUF/

Answer 3

尝试以下CSS和HTML：

.infobox_picture {
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: 10px;
    clear: both;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 90px;
}
    <div class="infobox_picture">
        <img src="images/image1.png" width="91px" height="90px" align="left" class="frame-img">
    </div>
    <hr />
    <div class="infobox_picture">            
        <img src="images/image1.png" width="91px" height="90px" align="left" class="frame-img">
    </div>
    <hr />
    <div class="infobox_picture">

        <img src="images/image1.png" width="91px" height="90px" align="left" class="frame-img">
    </div>

您应该使用Class属性（.infobox_picture和class=infobox_picture），而不是多次设置相同的ID，因为这会使您的HTML无效。

此外，如果您移除padding-bottom:14px;，则每个div将均匀间隔（即相隔30px + <hr />高度），如果您有padding-bottom:14px;，则每个div之间的空间将为{{} 1}} 29px上方的<hr />和15px以上<hr /> <{1}}

示例：使用44px

padding:14px;

没有img (15px) (14px) ------- (15px) img

padding:14px;

如何在html中均匀地使用图像之间的<hr />

3 个答案: