Spectre Position

Last Updated : 23 Jul, 2025

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)