Проблемы с предоставлением CSS

Question

Я застрял с моим CSS.

За последние несколько дней я узнал о Селекторах CSS и почувствовал, что добился прогресса. Теперь я не могу пройти мимо 1 вопроса, но я не понимаю, что вызывает проблему.

JSFiddle

<aside> 
<section> 
    <article> 
    <h1>Campaign Details</h1> 
    <div class="table"> 
     <p><span>Campaign </span><span>This</span></p> 
     <p><span>Campaign </span><span>That</span></p> 
     <p><span>Campaign </span><span>Created on 03/09/2014</span></p> 
     <p><span>Campaign </span><span>03/09/2014 11:57:41</span></p> 
     <p><span>Campaign </span><span>03/09/2014 11:59:52</span></p> 
     <p><span>Number</span><span>1</span></p> 
    </div> 
</article> 

CSS

aside section article { 
     width:350px; 
     float:left; 
    } 

    aside section :last-child{ 
     margin-left:10px; 
    } 

    aside section article:after { 
     clear:both; 
     display:table; 
     content: ''; 
    } 


    .table { 
     margin:20px; 
     padding:10px; 
     border:solid 1px #ccc; 
     background:white; 
     overflow:auto; 
    } 


    .table p { 
     clear:both; 
     margin:0px; 
     padding:5px; 
     overflow:auto; 
    } 

    .table p:nth-child(1n) { 
     background: #EBEBEB; 
    } 

    .table p:nth-child(2n) { 
     background: #fff; 
    } 

    .table p span:nth-child(1n) { 
     font-weight:bold; 
    } 

    .table p span:nth-child(2n) { 
     width:150px;  
     float:right; 
     font-weight:normal; 
    } 

Как вы можете видеть из этого экрана

Как вы можете видеть, у меня есть дополнительные отступы, но я не ee, откуда приходит это дополнение.

Независимо от количества тегов <p> (в том же формате), в последней записи есть проблема. Я думал об использовании селектора CSS, чтобы выработать last-child, но это чувствовало себя взломанным.

Можно ли это исправить?

Answer 1

aside section :last-child { 

вызывает запас:

margin-left: 10px; 

Именно поэтому он имеет дополнительный импульс 10px на последнем пункте.

Answer 2

Я бы посоветовал использовать листы сброса css. они сбросит странные стили по умолчанию, так что вам не придется беспокоиться о кросс-браузерных вещи, как в сторону раздела: последний-ребенок

вот пример: http://www.cssreset.com/scripts/eric-meyer-reset-css/

Answer 3

Вы добавили пространство Inbetween в element селектора и last-child селектор HERE:

aside section :last-child... 

Это должно быть без пробелов (как пространства обозначают новый селектор дочерних

aside section:last-child... 

Тогда у вас есть эффект, которым вы были.

http://jsfiddle.net/toa1qakm/4/

Честно, хотя, это должно быть сделано с таблицей, как это, кажется, табличные данные. :)