Как правильно оформить футер?

Question

[axblue]

Прошу помощи с вёрсткой футера.
Изначально я делал так:

<footer>
        <div class="wrap">
            <div class="footer-wrap">
                <div class="item"> </div>           
                <div class="item"></div>
                <div class="item"> </div>
                <div class="item"></div>
            <div class="copyright">© 2013 Marble. All rights reserved. Theme by elemis.</div>
        </div>
    </footer>

То есть разделил на четыре блока по 25% и столкнулся с проблемой с отступами между блоками, попробовал сделать так:

<div class="item">
     <h3>Get in tounch</h3>
     <p>Fusce dapibus, tellus commodo, tortor mauris condimentum utellus fermentum, porta sem malesuada magna. </p>     
 </div>

И тегу p сделал padding-right, отступы появились, но появилась новая проблема, у последнего(4блока) не должно быть отступа. Наверное я изобретаю велосипед, поэтому прошу помощи у более опытных.

Answer 1

[#rybak]

<div class="footer-wrap">
   <div class="item"> </div>           
   <div class="item"></div>
   <div class="item"> </div>
   <div class="item"></div>
</div>
<style>
.footer-wrap,  .item {
    box-sizing: border-box;
    }
.footer-wrap {
   margin-left: -15px;
   margin-right: -15px;
   }
.item {
   padding-left: 15px;
   padding-right: 15px;
   }
</style>

На этом принципе основан bootstrap советую ознакомиться.

Comments

[axblue]

Отрицательные числа как-то пугают(не знаю почему), но результат порадовал)

[#rybak]

В твоем случае можно обойтись и :last-child , так как ты точно знаешь что в футере ровно 4 блока.

Способ с отрицательными значениями margin - полезен в случае, когда ты не знаешь сколько item-ов будет всего. (Например позже добавят еще 4 блока ниже, а потом еще несколько).

Answer 2

[sergski]

Отступ у последнего можно так убрать — :last-child {padding-right: 0}

Answer 3

[#FFFFFF]

Еще как вариант - использовать flexbox.
Но если не переделывать, вариант с :last-child, описанный выше, прекрасно подходит