CSS3 - Tamanho da Caixa

A propriedade de dimensionamento da caixa é usada para alterar a altura e a largura do elemento.

Desde css2, a propriedade box tem funcionado como mostrado abaixo -

largura + preenchimento + borda = largura real visível / renderizada da caixa de um elemento

altura + preenchimento + borda = altura real visível / renderizada da caixa de um elemento

Significa que quando você define a altura e a largura, ele parece um pouco maior do que o tamanho dado, pois o elemento delimitador e preenchimento são adicionados à altura e largura do elemento.

Propriedade de dimensionamento CSS2

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

A imagem acima tem a mesma largura e altura de dois elementos, mas o resultado é diferente, porque o segundo elemento está incluído na propriedade de preenchimento.

Propriedade de dimensionamento da caixa CSS3

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

A amostra acima tem a mesma altura e largura com box-sizing:border-box. aqui o resultado é mostrado abaixo.

Isso produzirá o seguinte resultado -

Os elementos acima têm a mesma altura e largura com tamanho de caixa: caixa de borda, então o resultado é sempre o mesmo para ambos os elementos, conforme mostrado acima.

↰ Previous page