Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilities Padding Helpers Classes in Foundation CSS.
In Foundation CSS, Prototyping Utilities Padding Helpers are used to create some space around the content of the element.
Foundation CSS Prototyping Utilities padding Helpers classes:
- padding (all sides): This class can be used to apply padding along all the sides of the content.
- padding top: This class can be used to apply padding on the top side of the content.
- padding bottom: This class can be used to apply to pad on the bottom side of the content.
- padding left: This class can be used to apply padding on the left side of the content.
- padding right: This class can be used to apply padding on the right side of the content.
- padding-horizontal: This class can be used to apply padding in the horizontal direction of the content.
- padding-vertical: This class can be used to apply padding in the vertical direction of the content.
Syntax:
<div class="Utilities-padding-Helpers-classes">
...
</div>Note: Here all means (0, 1, 2, 3). It is relative units with respect to 8px, means 0 = 0px, 1= 8px, 2 = 16px and 3 = 24px.
Example 1: Below is the example that illustrates the use of padding helpers using padding-all class.
<!DOCTYPE html> <html>
<head>
<title>Foundation CSS Prototyping Utilities Padding Helpers</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body style="margin-inline: 30rem;">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Prototyping Utilities Padding Helpers</h3>
<div class="callout clearfix alert">
<div class="padding-0 callout">
0 padding all around
</div>
</div>
<br><br>
<div class="callout clearfix warning">
<div class="padding-1 callout">
8px padding all around
</div>
</div>
<br><br>
<div class="callout clearfix primary">
<div class="padding-2 callout">
16px padding all around
</div>
</div>
<br><br>
<div class="callout clearfix success">
<div class="padding-3 callout">
24px padding all around
</div>
</div>
</center>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Padding Helpers
Example 2: Below is the example that illustrates the use of padding helpers using padding-top-all class.
<!DOCTYPE html> <html>
<head>
<title>Foundation CSS Prototyping Utilities Padding Helpers</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body style="margin-inline: 30rem;">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Prototyping Utilities Padding Helpers</h3>
<div class="callout clearfix alert">
<div class="padding-top-0 callout">
0 padding-top
</div>
</div>
<br><br>
<div class="callout clearfix warning">
<div class="padding-top-1 callout">
8px padding-top
</div>
</div>
<br><br>
<div class="callout clearfix primary">
<div class="padding-top-2 callout">
16px padding-top
</div>
</div>
<br><br>
<div class="callout clearfix success">
<div class="padding-top-3 callout">
24px padding-top
</div>
</div>
</center>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Padding Helpers
Example 3: Below is the example that illustrates the use of padding helpers using padding-vertical-all class.
<!DOCTYPE html> <html>
<head>
<title>Foundation CSS Prototyping Utilities Padding Helpers</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body style="margin-inline: 30rem;">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Prototyping Utilities Padding Helpers</h3>
<div class="callout clearfix alert">
<div class="padding-vertical-0 callout">
0 padding-vertical
</div>
</div>
<br><br>
<div class="callout clearfix warning">
<div class="padding-vertical-1 callout">
8px padding-vertical
</div>
</div>
<br><br>
<div class="callout clearfix primary">
<div class="padding-vertical-2 callout">
16px padding-vertical
</div>
</div>
<br><br>
<div class="callout clearfix success">
<div class="padding-vertical-3 callout">
24px padding-vertical
</div>
</div>
</center>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Padding Helpers
Reference: https://get.foundation/sites/docs/prototyping-utilities.html#padding-helpers