Dimensionamento de caixa em Tailwind CSS
Vamos nos aprofundar no conceito de dimensionamento da caixa Tailwind com exemplos neste artigo. Os usuários podem usar essa classe para definir se o preenchimento e as bordas serão incluídos nos cálculos de largura e altura totais ou não.
A classe aceita vários valores em tailwind CSS , abrangendo todas as propriedades.
Uma alternativa ao dimensionamento de caixa CSS.
Classes de dimensionamento de caixa de vento de cauda
borda da caixa
Ao usar a classe de borda da caixa tailwind, as propriedades de largura e altura abrangem o conteúdo, o preenchimento e as bordas de um elemento.
Por exemplo, se definirmos a largura de um elemento como 500 pixels, essa largura incluirá qualquer borda ou preenchimento adicionado.
Portanto, a caixa de conteúdo reduzirá seu tamanho para ajustar a largura extra.
Isso simplifica o processo de dimensionamento de elementos.
Sintaxe
<element class="box-border">....</element>
conteúdo da caixa
Ao usar a classe de conteúdo de caixa, as propriedades de largura e altura incluem apenas o conteúdo de um elemento.
Por exemplo, se definirmos a largura de um elemento como 500 pixels, o conteúdo terá 500 pixels de largura sem preenchimento e borda.
O preenchimento e a borda serão adicionados a essa largura na renderização.
Este é o valor padrão da classe de dimensionamento de caixa.
Sintaxe
<element class="box-content">....</element>
Abaixo está um exemplo que gira em torno da aplicação das classes box-border e box-content no Tailwind:
Example:
Abaixo está outro exemplo que ajuda na compreensão das classes box-border e box-content :
Example:
Tendo aprendido o que é Tailwind Box Sizing , agora você pode usá-lo para criar um design de site impressionante .
