Tachyons Layout Box Sizing

Last Updated : 26 Jul, 2022

Tachyons is a CSS toolkit that is used to create a responsive website. In this article, we will learn how to include box-sizing using Tachyons.

Box Sizing in Tachyons is used to create the different sizes of the box on the webpage. Every element that we are using in the webpage has different-sized boxes. Examples are HTML, body, div, article, and many more.

Tachyons Layout Box Sizing Classes:

There are no predefined classes that tachyons provide for this, we need to use width classes to fix the box’s width.

Elements with different sizes are listed below:

HTML: This element is used to define the HTML page.
body: This element is used to define the body or content of the page.
div: This element is used to define the division of the webpage.
article: This element is used to include articles on the webpage.
section: This element is used to define the section on the webpage.
main: This element is used to define the main on the webpage.
footer: This element is used to define the footer on the webpage.
header: This element is used to define the header of the content.
form: This element is used to define the form on the webpage.
fieldset: This element is used to define the fieldset on the webpage.
legend: This element is used to define the legend on the webpage.
pre: This element is used to make the element highlighted.
code: This element is used to include the code in the webpage.
a: This element is used to include the link on the webpage.
h1,h2,h3,h4,h5,h6: These element is used to define the header of the content.
p: This element is used to define the paragraph on the webpage.
ul: This element is used to define the unordered list.
ol: This element is used to define the ordered list.
li: This element is used to define the list on the webpage.
dl: This element is used to define the description list.
dt: This element is used to define the term/name in a description list.
dd: This element is used to describe a term/name in a description list
textarea: This element is used for a multi-line text input control.
table: This element is used to define the table on the webpage
td: This element is used for the Data Cell element.
th: This element is used to create the table header.
tr: This element is used for the Table Row element.
input[type=”email”]: This element is used to define the input type of email.
input[type=”number”]: This element is used to define the input type of number.
input[type=”password”]: This element is used to define the input type of password.
input[type=”tel”]: This element is used to define the input type of telephone .
input[type=”text”]: This element is used to define the input type of text.
input[type=”URL”]: This element is used to define the input type of URL.

Example 1: Below example demonstrates the Tachyons Layout Box Sizing.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
          href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body{ 
            background-color:green; 
            margin:50px; 
            border:2px solid black; 
        } 
        html{ 
            background-color:lightgreen; 
            border:5px solid red; 
        } 
        h1{ 
            text-align:center; 
            margin: 50px; 
            border:5px solid blue; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
</body> 
  
</html>

Output:

Explanation: In the above code we have made use of two different elements <HTML> element and <body> element and we can clearly see that the two boxes are of different sizes. We can change each element’s size by defining that element’s size by using width and height or margin and padding.

Example 2: In the below example we will see the different sizes of the box.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
          href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        html{ 
            background-color:lightgreen; 
            margin:20px; 
            border:5px solid black; 
        } 
        h1{ 
            text-align:center; 
            margin:20px; 
            border:5px solid orange; 
        } 
        h2{ 
            background-color:red; 
            margin:20px; 
            border:5px solid blue; 
        } 
        h3{ 
            background-color:yellow; 
            margin:20px; 
            border:5px solid pink; 
        } 
        h4{ 
            background-color:grey; 
            margin:20px; 
            border:5px solid lightgrey; 
        } 
        h5{ 
            background-color:violet; 
            margin:20px; 
            border:5px solid brown; 
        } 
        h6{ 
            background-color:pink; 
            margin:20px; 
            border:5px solid red; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1><br> 
    <h2>GeeksforGeeks</h2> 
    <h3>GeeskforGeeks</h3> 
    <h4>GeeksforGeeks</h4> 
    <h5>GeeksforGeeks</h5> 
    <h6>GeeksforGeeks</h6> 
</body> 
  
</html>