Gaps between div and div; Gaps between text and div

Question

I'm having trouble with making two diferent gaps in one div. I want to make gaps between div and div; gap between text and div. If i add padding it doesn't help, it only changes height for both. Is there a way to do this?

Both gaps need to have the same height - 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;
}

Thankyou, Ričards.

Answer 1

Use float for .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>

Answer 2

You had a lot of strange an unnecessary CSS rules which I cleaned up, so if you compare with my sample below and yours, you'll see what I did.

There will still be a few pixel difference based on the font used and its internal white space margins.

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

---

Here is some inline notes on what I change

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

change the padding-bottom:18px to padding-bottom:10px in class .sho_dat