Div next other, width are percents, paddings breaks lines

Question

Мне удалось создать div s, чтобы действовать как столбец таблиц. Однако теперь я хочу отступы между div. Если я что-то вроде этого:

<div style="float:left; width:100%;"> 
    <?php 
    foreach ($datas as $rec) { ?> 
    <div style="float:left; width:100%; background-color: green;"> 
    <div style="margin: 0px; float:left; width: 25%; background-color: red;"><a href="<?php echo $rec['HTTP']; ?>" target="_blank"><?php echo $rec['LINKNAME']; ?></a></div> 
    <div style="margin: 1px; background-color: yellow;"><?php echo $rec['DESCRIPTION']; ?></div> 
    </div> 
    <?php } ?> 
    </div> 

из margin: 1px разваливается. Как это исправить?

Answer 1

<div style="float:left; width:100%;"> 
<?php 
foreach ($datas as $rec) { ?> 
    <div style="float:left; width:100%; background-color: green;"> 
     <div style="padding: 1px; float:left; width: 25%; background-color: red;"><a href="<?php echo $rec['HTTP']; ?>" target="_blank"><?php echo $rec['LINKNAME']; ?></a></div> 
     <div style="padding: 1px; background-color: yellow;"><?php echo $rec['DESCRIPTION']; ?></div> 
    </div> 
<?php } ?> 
</div> 

Answer 2

Есть 2 решения я могу видеть этого:

1. Задайте свой запас в процентах, например margin:1%;
2. Используйте опцию CSS3 box-sizing, например.

webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox, other Gecko */

box-sizing: border-box;