DEV Community

Cover image for CSS calc() function
Shubham Tiwari
Shubham Tiwari

Posted on

CSS calc() function

Hello Everyone today i will be discussing calc() function in CSS.

  • Sometimes we have to provide the numerical values to the properties and wants a type of equations that can help us to create a constant way to apply that numerical value and you don't have to set the values manually everytime if there is a change in the values.
  • Example - Suppose you created 3 elements and make them inline-block and wants them equal width and between them , a space of 30px and also wants that the entire width of the parent container to be used by those elements, Well you might think providing the elements equal width in pixels to those elements but whenever the container width changes , you have to change the width of those elements also to keep them in one row.There you will be in need of something that could do the work for you.
  • calc() function does this for you , it can be used to create some equation that does the mathematical part for you.

Example - Creating Elements of equal width

<div class="container">
      <div class="child-element">First</div>
      <div class="child-element">Second</div>
      <div class="child-element">Third</div>
</div>
Enter fullscreen mode Exit fullscreen mode
* {
    padding: 0;
    margin: 0;
}

.container {
    font-size: 0;
}

.child-element {
    width: calc((100% - 60px) / 3);
    height: 300px;
    background-color: crimson;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 2rem;
    font-size: 20px;
}

.child-element:nth-child(2) {
    margin: 0 30px;
}
Enter fullscreen mode Exit fullscreen mode

Output -

Image description

  • As you can see we have 3 child elements and we provided the equal width to all using calc() function.
  • (100% - 60px) / 3, it means the elements width will be 100% - 60px (60 px due to margin left and right in the second element takes 60px , 30left + 30right = 60 ), then we divide it by 3 taking 1/3 space equally.
  • In the container , we have given font-size:0, to cancel out the spacing created due to inline-block property.

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)