JS中的空格的CSS问题

Question

我试图创建地图传奇。

图例应采用颜色名称和文字的格式。 （例如蓝色1-10）

颜色和文本之间有空格的问题我希望文本与颜色对齐而不是在中间。 文本存在于div的中间

请问我如何将文字对齐颜色左边的文字？

CSS文件

#legendWrapper {
position : absolute;
top : 700px;
right: 70px;
} 

 #legend {
    background-color: #FFF;
    margin: 10px;
    padding: 5px;
    width: 150px;
  }

 #legend p {
    font-weight: bold;
    margin-top: 3px;
  }

#legend div {
    clear: both;
}

.color {
    height: 12px;
    width: 12px;
    margin-right: 3px;
    float: left;  
    display: block;     
  }

JS档案

        var legendWrapper = document.createElement('div');
            legendWrapper.id = "legendWrapper";
            parentSelector.appendChild(legendWrapper);

             var legend = document.createElement('div');
             legend.id = 'legend';

             var title = document.createElement('p')
             title.innerHTML = 'Map Title';
             legend.appendChild(title);

             for ( var i  = 0; i < 5  ;i++){
                 var legendItem = document.createElement('div');
                 var color = document.createElement('span');
                 color.setAttribute('class', 'color');
                 color.style.backgroundColor = "blue";
                 legendItem.appendChild(color);

                 var minMax = document.createElement('span');
                 minMax.innerHTML = "6100000" + ' - ' + "9050000";
                 legendItem.appendChild(minMax);

                 legend.appendChild(legendItem);                              

             }
             legendWrapper.appendChild(legend);