What are the advantages of using the box-sizing property on elements? [duplicate]

Question

What are the advantages of using the box-sizing property on elements? [duplicate]

Navigation

#1 by (2 votes)

0

I would like to know the advantages of CSS's box-sizing property.

css

asked by anonymous 16.10.2018 / 17:12

1 answer

How do I pass an id through the url using CodeIgniter? How to sort items in a list using two different values?

score 2 · Accepted Answer

To facilitate your understanding I created this .html file with a simple and pleasant clarification of your doubt.

<!DOCTYPE html>
<html>
<head>
<style> 
#exemplo1 {
    box-sizing: content-box;    
    width: 300px;
    height: 100px;
    padding: 30px;    
    border: 10px solid black;
}

#exemplo2 {
    box-sizing: border-box;
    width: 300px;
    height: 100px;
    padding: 30px;    
    border: 10px solid black;
}
</style>
</head>
<body>

<h1>A propriedade css: box-sizing </h1>
<p>Define como a largura e a altura de um elemento são calculadas: devem incluir preenchimento e bordas ou não.</p>

<h2>box-sizing: content-box (padrão):</h2>
<p>Largura e altura só se aplicam ao conteúdo do elemento, aqui as propriedades de largura e tamanho da div não serão limitadas pelo box-sizing</p>
<div id="exemplo1">A div irá manter suas propriedades e a largura da borda irá somar com o tamanho total da div. width 300px + padding 30px + border 10px</div>

<h2>box-sizing: border-box:</h2>
<p>Largura e altura se aplicam para as partes do elemento, ou seja, a borda fará parte do tamanho total da div, tanto como a borda e o padding.</p>
<div id="exemplo2">Aqui, a largura total é 300 px.</div>

</body>
</html>

The above Annex refers to the explanatory code quoted above.

Note : You just copy the code sample code above and save it to a file with the html extension. Example: index.html .

I hope I have helped.