Adicionando Espaço com Margens e Preenchimento
As propriedades margin, padding e border permitem adicionar mais espaço aos elementos, melhorando a aparência, legibilidade e usabilidade do recurso web. Vamos analisar cada uma delas em detalhes.
Propriedades margin e padding
padding
padding refere-se ao espaço entre o conteúdo de um elemento e sua borda.
padding: top right bottom left
Temos várias maneiras de atribuir um valor ao padding.
Forma abreviada
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Cada padding separadamente
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin refere-se ao espaço entre um elemento e os elementos adjacentes. É a área fora da borda do elemento.
margin: top right bottom left
Podemos definir a margin de algumas maneiras.
Forma abreviada
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Cada margem separadamente
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Propriedade border
border refere-se à linha que envolve o padding e o conteúdo de um elemento. É a área que separa o conteúdo do elemento da sua margem.
border: width style color;
Forma abreviada
border: 4px solid brown;
Significa que a borda de todos os lados será igual. Sua width é 4px, o style é solid e a color é brown.
Considere o exemplo a seguir para analisar os possíveis estilos de borda:
index.html
styles.css
Saída
Cada borda separadamente
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Qual é a diferença entre margin e padding no CSS?
2. Qual é a finalidade da propriedade border?
3. Como podemos aplicar valores diferentes de margin para os diferentes lados de um elemento?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain the difference between margin and padding?
How do I choose which border style to use?
Can I use different values for each side of margin, padding, or border?
Awesome!
Completion rate improved to 2.56Adicionando Espaço com Margens e Preenchimento
Deslize para mostrar o menu
As propriedades margin, padding e border permitem adicionar mais espaço aos elementos, melhorando a aparência, legibilidade e usabilidade do recurso web. Vamos analisar cada uma delas em detalhes.
Propriedades margin e padding
padding
padding refere-se ao espaço entre o conteúdo de um elemento e sua borda.
padding: top right bottom left
Temos várias maneiras de atribuir um valor ao padding.
Forma abreviada
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Cada padding separadamente
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin refere-se ao espaço entre um elemento e os elementos adjacentes. É a área fora da borda do elemento.
margin: top right bottom left
Podemos definir a margin de algumas maneiras.
Forma abreviada
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Cada margem separadamente
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Propriedade border
border refere-se à linha que envolve o padding e o conteúdo de um elemento. É a área que separa o conteúdo do elemento da sua margem.
border: width style color;
Forma abreviada
border: 4px solid brown;
Significa que a borda de todos os lados será igual. Sua width é 4px, o style é solid e a color é brown.
Considere o exemplo a seguir para analisar os possíveis estilos de borda:
index.html
styles.css
Saída
Cada borda separadamente
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Qual é a diferença entre margin e padding no CSS?
2. Qual é a finalidade da propriedade border?
3. Como podemos aplicar valores diferentes de margin para os diferentes lados de um elemento?
Obrigado pelo seu feedback!
