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

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;
}

谢谢你，里查兹。

Answer 1

我清理了许多奇怪且不必要的 CSS 规则，因此如果您将下面的示例与您的示例进行比较，您会看到我做了什么。

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

.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>

---

这里有一些关于我所做更改的内联注释

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

.sho_dat p{
    font-family: OpenSans-Regular;
    font-size: 12px;
    line-height: 13px;
    color: #9a9a9a;
    margin: 0;
    padding: 0;                     /* not needed - removed */
    -webkit-margin-before: 0px;     /* temp. removed */
    -webkit-margin-after: 0px;      /* temp. removed */
    -webkit-margin-start: 0px;      /* temp. removed */
    -webkit-margin-end: 0px;        /* temp. removed */
    font-weight: normal;
    display: block;                 /* not needed - removed */
    width: 230px;                   /* adjusted to fit inside parent */
    margin-top: 1px;                /* not needed - removed */
    margin-left: 0px;               /* not needed - removed */
}

.sho_dat {
    padding-left: 42px;             /* not needed - removed */
    padding-bottom: 18px;           /* adjusted to 10px */
    width: 228px;
    border: solid 1px #f2f2f2;
    background: #fff;
    min-height: 30px;
    height:auto;
}

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

.sho_use img {
    position: relative;
    top: 2px;                          /* not needed - removed */
    left: 2px;                         /* not needed - removed */
}

.sho_sho {
    margin-top: -21px;                 /* not needed - removed */
}

Answer 2

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

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>