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

谢谢你，Ricards。

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 */
}