Spectre Position
Last Updated :
25 Mar, 2022
Spectre Position classes are used for useful layout and position things, including clearfix, float, position, margin, and padding utilities. The clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup and the float is used to position the elements to the left, right, of its container along with permitting the text and inline elements to wrap around it.
The position tells about the method of positioning for an element or an HTML entity. Margins are used to create space around the element. We can set the different sizes of margins for individual sides(top, right, bottom, left) and paddings are used to create space around the element, inside any defined border.
Spectre Position Class:
- clearfix: This class is used to clear float.
- float-left: This class is used to create the left-floated element.
- float-right: This class is used to create the right-floated element.
- p-relative | absolute | fixed | sticky | centered: This class is used to define the position of the element.
- m-1 | 2: This class is used to set the margin of all margin(m-1 is 4px and 2 is 8px)
- mt-1 | 2: This class is used to set the margin of top margin(m-1 is 4px and 2 is 8px)
- mx-1 | 2: This class is used to set the margin of left margin(m-1 is 4px and 2 is 8px)
- my-1 | 2: This class is used to set the margin of right margin(m-1 is 4px and 2 is 8px)
- p-1 | 2: This class is used to set the padding of all padding (m-1 is 4px and 2 is 8px)
- pt-1 | 2: This class is used to set the padding of top padding (m-1 is 4px and 2 is 8px)
- px-1 | 2: This class is used to set the padding of left padding (m-1 is 4px and 2 is 8px)
- py-1 | 2: This class is used to set the padding of right padding (m-1 is 4px and 2 is 8px)
Syntax:
<element class="Position-Class">
Below examples illustrate the Spectre Position.
Example 1: In this example, we will use float-right class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<style>
div {
border: 3px solid green;
}
.gfg {
overflow: auto;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Spectre Position Class</strong>
<br>
</center>
<div class="gfg">
<img src=
alt="Pineapple" width="200" height="200" class="float-right">
GATE(Graduate Aptitude Test in Engineering) is one the most
important and in-demand entrance exam for engineering graduates
in our country. M.Tech. in Computer Science is one of the most
demanding courses at prestigious institutes like IISCs and IITs.
GATE(Graduate Aptitude Test in Engineering) is one of the ways
to get into these top institutes. Every year around 10 Lakh
candidates apply for GATE exam and very few of them manage to
ace the exam with good score. So the competition is clearly
very tough and simply preparing without any strategy will make
it difficult to land you into IISCs and IITs.
</div>
</body>
</html>
|
Output:
Example 2: In this article, we will use all the margin and padding classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<style>
div {
border: 3px solid green;
height: 100%;
}
img {
border: 2px solid blue;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Spectre Position Class</strong>
<br>
</center>
<div class="gfg">
<img src=
class="m-2 p-2">
<img src=
class="mt-2 pt-2">
<img src=
class="mx-2 px-2">
<img src=
class="my-2 py-2">
</div>
</body>
</html>
|
Output:
Reference link: https://picturepan2.github.io/spectre/utilities/position.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...