{"id":37774,"date":"2025-07-15T12:36:58","date_gmt":"2025-07-15T15:36:58","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&p=37774"},"modified":"2025-07-15T12:38:23","modified_gmt":"2025-07-15T15:38:23","slug":"css-calc","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/css-calc\/","title":{"rendered":"Calculadoras em CSS: entenda a fun\u00e7\u00e3o calc()"},"content":{"rendered":"

A fun\u00e7\u00e3o calc() no CSS<\/strong> permite realizar c\u00e1lculos diretamente nas propriedades de estilo, para tornar o design de p\u00e1ginas web mais flex\u00edvel e din\u00e2mico.<\/p>\n

Com ela, voc\u00ea pode combinar diferentes unidades de medida, como pixels, porcentagens e mais, para facilitar a cria\u00e7\u00e3o de layouts responsivos e ajust\u00e1veis a diferentes tamanhos de tela.<\/p>\n

Como usar a fun\u00e7\u00e3o calc() no CSS?<\/h2>\n

Veja quais s\u00e3o os usos mais comuns da fun\u00e7\u00e3o calc()<\/em>.<\/p>\n

Sintaxe b\u00e1sica do CSS calc()<\/h3>\n

A sintaxe \u00e9 simples: calc(<express\u00e3o>)<\/em>. O c\u00e1lculo pode envolver qualquer combina\u00e7\u00e3o de unidades, como pixels (px), porcentagens (%), em (em), entre outros.<\/p>\n

Veja um exemplo b\u00e1sico:<\/p>\n

div {<\/em>\r\n\r\n width: calc(100% - 50px);<\/em>\r\n\r\n}<\/em><\/pre>\n
Nesse exemplo, a largura do elemento ser\u00e1 100% da largura do cont\u00eainer, menos 50 pixels.<\/p>\n
O uso da calc()<\/em> torna o design mais flex\u00edvel enquanto permite ajustes responsivos <\/strong>e precisos, como quando precisamos que um elemento ocupe uma porcentagem espec\u00edfica da tela, mas com margem fixa.<\/p>\n
Operadores matem\u00e1ticos suportados e suas regras<\/h3>\n
A fun\u00e7\u00e3o calc()<\/em> no CSS suporta quatro operadores matem\u00e1ticos principais: soma<\/strong> (+), subtra\u00e7\u00e3o <\/strong>(-), multiplica\u00e7\u00e3o <\/strong>(*) e divis\u00e3o <\/strong>(\/). Esses operadores permitem realizar c\u00e1lculos diretamente nas propriedades de estilo, o que contribui para a versatilidade do design.<\/p>\n
E vale lembrar: ao trabalhar com calc()<\/em>, documente as opera\u00e7\u00f5es realizadas, como em um coment\u00e1rio em CSS<\/a> para explicar o c\u00e1lculo e facilitar manuten\u00e7\u00f5es futuras.<\/p>\n
Soma (+)<\/h4>\n
Exemplo:<\/p>\n
 div {<\/em>\r\n\r\n width: calc(50% + 20px);<\/em>\r\n\r\n}<\/em><\/pre>\n
Isso adiciona 20 pixels \u00e0 largura de 50% da tela.<\/p>\n
Subtra\u00e7\u00e3o (-)<\/h4>\n
Exemplo:<\/p>\n
 div {<\/em>\r\n\r\n height: calc(100vh - 100px);<\/em>\r\n\r\n}<\/em><\/pre>\n
Nesse caso, a altura \u00e9 100% da altura da janela, menos 100 pixels.<\/p>\n
Multiplica\u00e7\u00e3o (*)<\/h4>\n
A multiplica\u00e7\u00e3o pode ser feita entre um n\u00famero e uma unidade.<\/p>\n
Exemplo:<\/p>\n
 div {<\/em>\r\n\r\n width: calc(10px * 5);<\/em>\r\n\r\n}<\/em><\/pre>\n
Nesse exemplo, a largura do div<\/em> ser\u00e1 igual a 50 pixels (10px multiplicado por 5).<\/p>\n
Divis\u00e3o (\/)<\/h4>\n
A divis\u00e3o tamb\u00e9m pode ser usada entre um n\u00famero e uma unidade.<\/p>\n
Exemplo:<\/p>\n
div {<\/em>\r\n\r\n width: calc(100px \/ 2);<\/em>\r\n\r\n}<\/em><\/pre>\n
Aqui, a largura do div <\/em>ser\u00e1 50 pixels, j\u00e1 que 100px dividido por 2 resulta em 50px.<\/p>\n
Lembre-se de sempre deixar um espa\u00e7o entre os n\u00fameros e os operadores, para garantir que o c\u00e1lculo seja realizado corretamente.<\/p>\n
Como fazer uma calculadora com CSS e calc()?<\/h2>\n
Combine a fun\u00e7\u00e3o calc()<\/em> com o elemento input[type=range]<\/em>, que cria um controle deslizante. Assim, voc\u00ea cria uma mini calculadora interativa, em que a pessoa usu\u00e1ria pode ajustar a largura de um elemento dinamicamente.<\/p>\n
Ao combinar o input[type=range]<\/em> com calc()<\/em>, \u00e9 poss\u00edvel modificar a largura de um elemento com base no valor do controle deslizante.<\/p>\n
Exemplo funcional de como criar essa calculadora de largura:<\/p>\n
<!DOCTYPE html><\/em>\r\n<html lang=\"pt-br\"><\/em>\r\n<head><\/em>\r\n<meta charset=\"UTF-8\"><\/em>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/em>\r\n<title>Calculadora de Largura<\/title><\/em>\r\n<style><\/em>\r\n.container {<\/em>\r\nwidth: calc(50% + var(--slider-value));<\/em>\r\nheight: 100px;<\/em>\r\nbackground-color: lightblue;<\/em>\r\ntransition: width 0.3s ease;<\/em>\r\n}<\/em>\r\ninput[type=range] {<\/em>\r\nwidth: 100%;<\/em>\r\n}<\/em>\r\n<\/style><\/em>\r\n<\/head><\/em>\r\n<body><\/em>\r\n<div class=\"container\"><\/div><\/em>\r\n<input type=\"range\" min=\"0\" max=\"100\" value=\"0\" id=\"slider\"><\/em>\r\n<script><\/em>\r\nconst slider = document.getElementById('slider');<\/em>\r\nslider.addEventListener('input', function() {<\/em>\r\ndocument.documentElement.style.setProperty('--slider-value', `${slider.value}px`);<\/em>\r\n});<\/em>\r\n<\/script><\/em>\r\n<\/body><\/em>\r\n<\/html><\/pre>\n
Nesse caso, o valor do input[type=range]<\/em> controla a vari\u00e1vel CSS –slider-value<\/em>, que \u00e9 usada dentro de calc()<\/em> para ajustar a largura da div.container<\/em>.<\/p>\n
Ao mover o controle deslizante, a largura da div <\/em>muda de forma interativa e permite<\/strong> visualizar resultados em tempo real.<\/p>\n
Veja como ficar\u00e1:<\/p>\n
\"Imagem<\/p>\n
Quando usar `calc()` vs. `clamp()`?<\/h2>\n
Use calc()<\/em> quando precisar realizar c\u00e1lculos com unidades diferentes<\/strong>, como em somas ou subtra\u00e7\u00f5es, para mais flexibilidade ao definir tamanhos din\u00e2micos.<\/p>\n
J\u00e1 o clamp()<\/em> \u00e9 ideal para definir valores com um intervalo m\u00ednimo e m\u00e1ximo<\/strong>, o que garante um valor dentro de limites espec\u00edficos, independentemente do tamanho da tela.<\/p>\n
Em resumo, calc()<\/em> \u00e9 mais para ajustes espec\u00edficos; enquanto clamp()<\/em> mant\u00e9m valores responsivos dentro de uma faixa controlada.<\/p>\n
Quando usar `calc()` vs. `var()` (CSS Custom Properties)?<\/h2>\n
Use calc()<\/em> quando quiser realizar c\u00e1lculos diretamente nas propriedades de estilo<\/strong>, como somar ou subtrair valores em diferentes unidades. Eles s\u00e3o feitos no momento da aplica\u00e7\u00e3o.<\/p>\n
J\u00e1 as var()<\/em> (CSS Custom Properties) s\u00e3o para armazenar e reutilizar valores ao longo do seu c\u00f3digo<\/strong> e, assim, facilitar a organiza\u00e7\u00e3o e manuten\u00e7\u00e3o do CSS.<\/p>\n
Exemplos pr\u00e1ticos de uso do CSS calc()<\/h2>\n
Confira usos comuns do calc() em CSS.<\/p>\n
Definir larguras din\u00e2micas com calc()<\/h3>\n
Voc\u00ea pode combinar diferentes unidades, como px<\/em>, % <\/em>e vw<\/em>, para criar larguras din\u00e2micas que se ajustam melhor ao design.<\/p>\n
Exemplo:<\/p>\n
div {<\/em>\r\n\r\n width: calc(50% + 100px);<\/em>\r\n\r\n}<\/em><\/pre>\n
Nesse caso, a largura ser\u00e1 50% do cont\u00eainer mais 100 pixels. Isso garante um ajuste flex\u00edvel do elemento em diferentes tamanhos de tela, e ainda mant\u00e9m o layout consistente.<\/p>\n
Ajustar espa\u00e7amentos e paddings dinamicamente<\/h3>\n
Com calc()<\/em>, voc\u00ea pode ajustar espa\u00e7amentos e paddings com base em unidades diferentes.<\/p>\n
Por exemplo:<\/p>\n
div {<\/em>\r\n\r\n padding: calc(2vw + 20px);<\/em>\r\n\r\n}<\/em><\/pre>\n
Nesse exemplo, o padding ser\u00e1 uma combina\u00e7\u00e3o de 2% da largura da janela e 20 pixels fixos. Isso garantir\u00e1 o ajuste do espa\u00e7amento ao tamanho da tela e um layout equilibrado.<\/p>\n
Criar colunas flex\u00edveis sem media queries<\/h3>\n
Com calc()<\/em>, voc\u00ea pode criar colunas que se ajustam automaticamente, sem precisar de media queries.<\/p>\n
Exemplo:<\/p>\n
.container {<\/em>\r\n\r\n display: flex;<\/em>\r\n\r\n}<\/em>\r\n\r\n.column {<\/em>\r\n\r\n width: calc(33.33% - 20px);<\/em>\r\n\r\n margin-right: 20px;<\/em>\r\n\r\n}<\/em><\/pre>\n
Aqui, as colunas ocupar\u00e3o 33.33% da largura do cont\u00eainer, menos 20 px para garantir o espa\u00e7amento. O layout ser\u00e1 flex\u00edvel e responsivo sem depender de media queries.<\/p>\n
Centralizar elementos com calc()<\/h3>\n
\u00c9 poss\u00edvel alinhar o texto com CSS<\/a> com a fun\u00e7\u00e3o calc()<\/em>, pois ela tamb\u00e9m \u00e9 \u00fatil para centralizar elementos dinamicamente.<\/p>\n
Exemplo:<\/p>\n
div {<\/em>\r\n\r\n position: absolute;<\/em>\r\n\r\n top: 50%;<\/em>\r\n\r\n left: 50%;<\/em>\r\n\r\n transform: translate(-50%, -50%);<\/em>\r\n\r\n width: calc(100% - 40px);<\/em>\r\n\r\n}<\/em><\/pre>\n
Nesse caso, o div <\/em>ficar\u00e1 centralizado tanto vertical quanto horizontalmente, pois a fun\u00e7\u00e3o ajustar\u00e1 sua largura a 40px de margem.<\/p>\n
O que \u00e9 a fun\u00e7\u00e3o calc() no CSS?<\/h2>\n
A fun\u00e7\u00e3o calc()<\/em> no CSS \u00e9 uma forma de realizar c\u00e1lculos diretamente nas propriedades de estilo e, assim, combinar diferentes unidades de medida, como px<\/em>, %<\/em>, em<\/em> e vw<\/em>. Dessa forma, ela ajusta tamanhos e espa\u00e7amentos de forma flex\u00edvel.<\/p>\n
Usar calc()<\/em> no CSS \u00e9 uma maneira pr\u00e1tica de criar layouts adapt\u00e1veis, al\u00e9m de permitir que elementos se adaptem ao tamanho da tela sem perder o controle.<\/p>\n
Essa fun\u00e7\u00e3o \u00e9 especialmente \u00fatil em design responsivo, pois permite ajustar propriedades de largura, altura e espa\u00e7amento conforme a necessidade, sem depender de media queries.<\/p>\n
Aproveite e saiba mais sobre a hospedagem de site<\/a> da Locaweb!<\/p>\n","protected":false},"excerpt":{"rendered":"
A fun\u00e7\u00e3o calc() no CSS permite realizar c\u00e1lculos diretamente nas propriedades de estilo, para tornar o design de p\u00e1ginas web mais flex\u00edvel e din\u00e2mico. Com ela, voc\u00ea pode combinar diferentes unidades de medida, como pixels, porcentagens e mais, para facilitar a cria\u00e7\u00e3o de layouts responsivos e ajust\u00e1veis a diferentes tamanhos…<\/p>\n","protected":false},"author":48,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[119],"ht-kb-tag":[],"class_list":["post-37774","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-hospedagem-de-sites"],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/37774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/comments?post=37774"}],"version-history":[{"count":2,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/37774\/revisions"}],"predecessor-version":[{"id":37777,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/37774\/revisions\/37777"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/media?parent=37774"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-category?post=37774"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-tag?post=37774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}