What are the advantages of using the box-Sizing property on elements?

Asked

Viewed 141 times

0

I would like to know the advantages of the CSS box-Sizing property.

css front-end

1 answer

1


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

<!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>

Anexo The Annex above refers to the explanatory code cited initially.

Note: Just copy the code from code sample above and save to a file with the html extension. Example: index.html.

I hope I’ve helped.

Browser other questions tagged css front-end

You are not signed in. Login or sign up in order to post.