CSS Grenzen mit gleichen Abständen

Question

Ich bin sicher, dass es eine sehr einfache Möglichkeit ist, mein Problem zu beheben. Leider bin ich wirklich unerfahren in der Front-End-Entwicklung, aber ich muss mein Problem beheben. Kurz gesagt, es gibt einige dynamische Rahmen in meiner Tabelle, aber es sollten einige Leerzeichen zwischen jeder Rahmenbox sein.

Jetzt sieht es aus wie unten Bild

Es sollte jedoch

Mein Code wie unten Bild sein unten. Wie kann ich das mit CSS ändern?

.bg { 
 
    width: 100%; 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
} 
 
.chart { 
 
    border: solid 1px #e31515; 
 
    color: #e31515; 
 
    width: 100%; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}

<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<span style="overflow: hidden;left: 550px; height: 150px; width: 250px; position: absolute; "> <div > 
 
<table cellpadding="2" border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent"> 
 
     <div class="bg" style="height: 129px"> 
 
      <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
     </div> 
 
     </td> 
 
     <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent"> 
 
     <div class="bg" style="height: 129px"> 
 
      <div class="chart" style=" height: 14px; margin-top: 115px"></div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div> 
 
</span> 
 
<span style="overflow: hidden;left: 150px; height: 150px; width: 250px; position: absolute; "> 
 
     <div > 
 
      <table cellpadding="2" border="1"> 
 
       <tbody> 
 
        <tr> 
 
         <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" > 
 
          <div class="bg" style="height: 129px"> 
 
           <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
          </div> 
 
         </td> 
 
         <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" > 
 
          <div class="bg" style="height: 129px"> 
 
           <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
          </div> 
 
         </td> 
 
         <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" > 
 
          <div class="bg" style="height: 129px"> 
 
           <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
          </div> 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
     </span>

Answer 1

Sie padding verwenden. Stattdessen müssen Sie die Margin-Eigenschaft verwenden. Im Box-Modell wird das Padding zum Ausrichten des Inneninhalts einer Box verwendet. Da Sie jedoch den Stil auf den anwenden, müssen Sie die Randrechtseigenschaft jedes Elements angeben. Ersetzen Sie einfach das Padding durch die Randeigenschaft in bg style.

.bg { width: 100%; margin-left: 2px; margin-right: 2px; }

Hoffnung, das hilft. Wenn Sie diese Lösung richtig finden, markieren Sie sie als Antwort.

Answer 2

CSS-Rahmen-Abstand-Eigenschaft tut, was Sie brauchen.

table{ 
border-collapse: separate; 
border-spacing: 10px; 
} 

Beispiel hier: http://www.w3schools.com/csSref/tryit.asp?filename=trycss_table_border-spacing