Question

我在一个div中制造两个不同的差距时遇到了麻烦。我想在div和div之间留出空白;文本和div之间的差距。如果我添加填充它没有帮助，它只改变两者的高度。有没有办法做到这一点？

两个间隙都需要具有相同的高度 - 10px。

HTML：

<div class="sho_cha">
    <div class="sho_dat">
        <div class="sho_use">
            <img href="#" src="https://minotar.net/helm/Berisko/24">
        </div>
        <div class="sho_sho">
            <div class="sho_use_nam"><h1>Berisko</h1></div>
            <div class="sho_tex"><p>blah..</p></div>
        </div>      
    </div>
    <div class="sho_dat">
        <div class="sho_use">
            <img href="#" src="https://minotar.net/helm/FoidzaFlow/24">
        </div>
        <div class="sho_sho">
            <div class="sho_use_nam"><h1>FoidzaFlow</h1></div>
            <div class="sho_tex"><p>blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah..blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah..</p></div>
        </div>      
    </div>

CSS：

.sho_dat h1 {
    font-family: OpenSans-Regular;
    font-size: 12px;
    line-height: 12px;
    color: #707070;
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: normal;
    display: block;
    margin-top: -1px;
    margin-left: 0px;
}

.sho_dat p{
    font-family: OpenSans-Regular;
    font-size: 12px;
    line-height: 13px;
    color: #9a9a9a;
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: normal;
    display: block;
    width: 230px;
    margin-top: 1px;
    margin-left: 0px;
}

.sho_dat {
    padding-left: 42px;
    padding-bottom: 18px;
    width: 228px;
    border: solid 1px #f2f2f2;
    background: #fff;
    min-height: 30px;
    height:auto;
}

.sho_use {
    position: relative;
    top: 10px;
    left: -32px;
    width: 28px;
    height: 28px;
    border: solid 1px #f2f2f2;  
}

.sho_use img {
    position: relative;
    top: 2px;
    left: 2px;  
}

.sho_sho {
    margin-top: -21px;
}

谢谢你，Ričards。

Answer 1

你清理了很多奇怪的不必要的CSS规则，所以如果你和我的下面和你的样本进行比较，你会看到我做了什么。

根据使用的字体及其内部空白边距，仍会有一些像素差异。

URLConnection

.sho_dat h5 {                           /* exchanged h1 to h5, as no point of */
    font-family: OpenSans-Regular;      /* making a h1 look like a h5         */
    color: #707070;
    margin: 0;
}

.sho_dat p{
    font-family: OpenSans-Regular;
    font-size: 12px;
    line-height: 13px;
    color: #9a9a9a;
    margin: 0;
    width: 190px;
}

.sho_dat {
    padding-bottom: 10px;
    width: 228px;
    border: solid 1px #f2f2f2;
    background: #fff;
    min-height: 30px;
    height:auto;
}

.sho_sho,
.sho_use {
  display: inline-block;     /* added - make div side-by-side when space available */
  vertical-align: top;       /* added - align the at the top of their parent*/
}

.sho_use {
    width: 28px;
    height: 28px;
    border: solid 1px #f2f2f2;  
}

以下是我更改内容的一些内联说明

<div class="sho_dat">
    <div class="sho_use">
      <img href="#" src="https://minotar.net/helm/Berisko/24">
    </div>
    <div class="sho_sho">
      <div class="sho_use_nam"><h5>Berisko</h5></div>
      <div class="sho_tex"><p>blah..</p></div>
    </div>      
  </div>
  <div class="sho_dat">
    <div class="sho_use">
      <img href="#" src="https://minotar.net/helm/FoidzaFlow/24">
    </div>
    <div class="sho_sho">
      <div class="sho_use_nam"><h5>FoidzaFlow</h5></div>
      <div class="sho_tex"><p>blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah..blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah..</p></div>
    </div>      
  </div>

Answer 2

将班级padding-bottom:18px

中的padding-bottom:10px更改为.sho_dat

Answer 3

将float用于.sho_use

.sho_dat h1 {
font-family: OpenSans-Regular;
font-size: 12px;
line-height: 12px;
color: #707070;
margin: 0;
padding: 0;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: normal;
display: block;
margin-top: -1px;
margin-left: 0px;
}

.sho_dat p{
font-family: OpenSans-Regular;
font-size: 12px;
line-height: 13px;
color: #9a9a9a;
margin: 0;
padding: 0;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: normal;
display: block;
width: 230px;
margin-top: 1px;
margin-left: 0px;
}

.sho_dat {
padding: 10px 0 18px 42px;
width: 228px;
border: solid 1px #f2f2f2;
background: #fff;
min-height: 30px;
height:auto;
}

.sho_use {
float: left;
margin-left: -32px;
width: 28px;
height: 28px;
border: solid 1px #f2f2f2;  
}

.sho_use img {
position: relative;
top: 2px;
left: 2px;  
}

<div class="sho_cha">
<div class="sho_dat">
    <div class="sho_use">
        <img href="#" src="https://minotar.net/helm/Berisko/24">
    </div>
    <div class="sho_sho">
        <div class="sho_use_nam"><h1>Berisko</h1></div>
        <div class="sho_tex"><p>blah..</p></div>
    </div>      
</div>
<div class="sho_dat">
    <div class="sho_use">
        <img href="#" src="https://minotar.net/helm/FoidzaFlow/24">
    </div>
    <div class="sho_sho">
        <div class="sho_use_nam"><h1>FoidzaFlow</h1></div>
        <div class="sho_tex"><p>blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah..blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah.. blah..</p></div>
    </div>      
</div>

div和div之间的差距;文本和div之间的差距

3 个答案: