Início /Programação /CSS /Como manter o tamanho (width / height) de um elemento HTML independentemente do "padding" e do "border" - CSS Detalhes

Como manter o tamanho (width / height) de um elemento HTML independentemente do "padding" e do "border" - CSS Detalhes

Por: Angelo Luis Ferreira | 14/11/2020 Acessos: 9.035

Neste artigo vamos dar uma dica de como fixar o tamanho de um elemento HTML já contabilizando as dimensões das propriedades padding e border do CSS. Para resolver isso vamos aplicar o efeito box-sizing: box-border em todos elementos HTML da tela.

Observação:

a) Em CSS, para aplicarmos um efeito que possa atingir todos os elementos de uma página HTML utilizamos o seletor asterisco (*). Veja o exemplo abaixo:

* {
   box-sizing: content-box;
}

b) Por padrão, a propriedade box-sizing: content-box já vem atribuída a todos os elementos HTML, e portanto, não é necessário defini-la.

1. Criando um elemento HTML de exemplo com 160 X 160 pixels

1.1. No nosso exemplo vamos criar um elemento com 160 X 160 px. Vamos também adicionar um padding de 25px e um border de 5px:

<!DOCTYPE html>
<html>
<head>
<style>
.elemento {
	width: 160px;
    height: 160px;
    background-color: red;
    padding: 25px;
    border: 5px solid #000;
}
</style>

<head>
<body>

<div class="elemento"></div>

</body>
</html>

1.2. Observe que ao inspecionarmos o elemento HTML que criamos vamos obter um elemento com 220 X 220 px e não 160 X 160 px que gostaríamos de obter. Isso acontece porque a imagem na tela somou o tamanho do elemento ao tamanho do padding e ao tamanho do border: 160 + 25 + 25 + 5 + 5 = 220px.

2. Como manter o tamanho de elemento de acordo com os valores width e height definidos

2.1. Para obtermos um elemento HTML no tamanho que queremos (com width e height definidos), que no nosso exemplo é de 160 X 160px, precisaríamos descontar os valores do padding e do border. Para evitarmos a necessidade de fazer contas, basta utilizarmos a propriedade box-sizing: box-border que já faz isso automaticamente para nós. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
<style>

* {
	box-sizing: border-box;
}

.elemento {
	width: 160px;
    height: 160px;
    background-color: red;
    padding: 25px;
    border: 5px solid #000;
}
</style>

<head>
<body>

<div class="elemento"></div>

</body>
</html>

2.2. Observe agora que ao inspecionarmos o elemento que criamos, teremos como resultado as dimensões width e height definidas, independentemente do tamanho do padding e do border.

😀 Para visualizar o exemplo acima acesse o link: Squids Editor

Documentação Oficial

1. [box-sizing] » MDN Web Docs - Mozilla

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO