Por exemplo vamos supor que vc tenha um width de 800px.
Se você quer adicionar um padding de 10px o tamanho vai para 820px.
Agora vamos esclarecer algumas coisas:
Você pode utilizar
padding-bottom
padding-top
padding-left
padding-right
Se você utilizar qualquer um desses ele vai aumentar o tamanho aonde você definir.
Se você utilizar somente o padding ele vai aumentar em todos ao mesmo tempo.
por exemplo:
padding: 10px
é a mesma coisa que
padding-bottom: 10px padding-top: 10px padding-left: 10px padding-right: 10px
Ele vai aumentar a padding em todas as direções.
Eu uso muito isso!
Quando eu tenho uma div global que tem 800px e quero adicionar o padding(espaço entre o conteúdo e a borda), eu coloco o padding e diminuo o width.
Exemplo(antes):
#global{ width: 800px; }
Exemplo(depois com o padding):
#global{ width: 780px; padding-bottom: 10px padding-top: 10px padding-left: 10px padding-right: 10px }
Lembrando que a largura que é o que está te dando problemas agora só é adicionada a quando você coloca padding-left e paddind-right
Então nesse caso serão 20px que você terá que tirar da largura total da div.
E assim você aplica a mesma regra para as outras divs.
Arrocha!
- matrix likes this