Desenvolvimento Web com HTML, CSS e JavaScript > Exercício: Trabalhando com tamanhos e espaçamento

Exercício: Trabalhando com tamanhos e espaçamento

Objetivo

Nesse exercício trabalharemos com os tamanhos das caixas, com o espaço vazio entre essas caixas e com o espaço de respiro entre a caixa e seu conteúdo.

Em resumo, iremos:

A página ficará assim:

Visual da página ao final do exercício {w=35}

Passo a passo com código

  1. No arquivo sobre.css na pasta css faça as seguintes alterações:

    css/sobre.css
     body {
    +  width: 940px;
    +  margin-left: auto;
    +  margin-right: auto;
    +
       font-family: "Helvetica", "Lucida Grande", sans-serif;
       color: #3D3D3D;
     }
    
     h1 {
    +  padding: 10px;
    +
       background-color: #E1EDF2;
     }
    
     h2 {
       border-bottom: 2px solid black;
     }
    
     figure {
    +  margin: 30px;
    +  padding: 15px;
    +  
       text-align: center;
    
       background-color: whitesmoke;
       border: 1px solid lightgrey;
     }
    +
    +figcaption {
    +  margin-top: 10px;
    +}