Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
my-0margin-block: 0;my-1margin-block: .25rem;my-2margin-block: .5rem;my-3margin-block: .75rem;my-4margin-block: 1rem;my-5margin-block: 1.25rem;my-6margin-block: 1.5rem;my-7margin-block: 1.75rem;my-8margin-block: 2rem;my-9margin-block: 2.25rem;my-10margin-block: 2.5rem;my-11margin-block: 2.75rem;my-12margin-block: 3rem;my-13margin-block: 3.25rem;my-14margin-block: 3.5rem;my-15margin-block: 3.75rem;my-16margin-block: 4rem;my-17margin-block: 4.25rem;my-18margin-block: 4.5rem;my-19margin-block: 4.75rem;my-20margin-block: 5rem;my-21margin-block: 5.25rem;my-22margin-block: 5.5rem;my-23margin-block: 5.75rem;my-24margin-block: 6rem;my-25margin-block: 6.25rem;my-26margin-block: 6.5rem;my-27margin-block: 6.75rem;my-28margin-block: 7rem;my-29margin-block: 7.25rem;my-30margin-block: 7.5rem;my-31margin-block: 7.75rem;my-32margin-block: 8rem;my-33margin-block: 8.25rem;my-34margin-block: 8.5rem;my-35margin-block: 8.75rem;my-36margin-block: 9rem;my-37margin-block: 9.25rem;my-38margin-block: 9.5rem;my-39margin-block: 9.75rem;my-40margin-block: 10rem;my-41margin-block: 10.25rem;my-42margin-block: 10.5rem;my-43margin-block: 10.75rem;my-44margin-block: 11rem;my-45margin-block: 11.25rem;my-46margin-block: 11.5rem;my-47margin-block: 11.75rem;my-48margin-block: 12rem;my-49margin-block: 12.25rem;my-50margin-block: 12.5rem;my-51margin-block: 12.75rem;my-52margin-block: 13rem;my-53margin-block: 13.25rem;my-54margin-block: 13.5rem;my-55margin-block: 13.75rem;my-56margin-block: 14rem;my-57margin-block: 14.25rem;my-58margin-block: 14.5rem;my-59margin-block: 14.75rem;my-60margin-block: 15rem;my-61margin-block: 15.25rem;my-62margin-block: 15.5rem;my-63margin-block: 15.75rem;my-64margin-block: 16rem;my-65margin-block: 16.25rem;my-66margin-block: 16.5rem;my-67margin-block: 16.75rem;my-68margin-block: 17rem;my-69margin-block: 17.25rem;my-70margin-block: 17.5rem;my-71margin-block: 17.75rem;my-72margin-block: 18rem;my-73margin-block: 18.25rem;my-74margin-block: 18.5rem;my-75margin-block: 18.75rem;my-76margin-block: 19rem;my-77margin-block: 19.25rem;my-78margin-block: 19.5rem;my-79margin-block: 19.75rem;my-80margin-block: 20rem;my-81margin-block: 20.25rem;my-82margin-block: 20.5rem;my-83margin-block: 20.75rem;my-84margin-block: 21rem;my-85margin-block: 21.25rem;my-86margin-block: 21.5rem;my-87margin-block: 21.75rem;my-88margin-block: 22rem;my-89margin-block: 22.25rem;my-90margin-block: 22.5rem;my-91margin-block: 22.75rem;my-92margin-block: 23rem;my-93margin-block: 23.25rem;my-94margin-block: 23.5rem;my-95margin-block: 23.75rem;my-96margin-block: 24rem;my-97margin-block: 24.25rem;my-98margin-block: 24.5rem;my-99margin-block: 24.75rem;my-100margin-block: 25rem;my-101margin-block: 25.25rem;my-102margin-block: 25.5rem;my-103margin-block: 25.75rem;my-104margin-block: 26rem;my-105margin-block: 26.25rem;my-106margin-block: 26.5rem;my-107margin-block: 26.75rem;my-108margin-block: 27rem;my-109margin-block: 27.25rem;my-110margin-block: 27.5rem;my-111margin-block: 27.75rem;my-112margin-block: 28rem;my-113margin-block: 28.25rem;my-114margin-block: 28.5rem;my-115margin-block: 28.75rem;my-116margin-block: 29rem;my-117margin-block: 29.25rem;my-118margin-block: 29.5rem;my-119margin-block: 29.75rem;my-120margin-block: 30rem;my-121margin-block: 30.25rem;my-122margin-block: 30.5rem;my-123margin-block: 30.75rem;my-124margin-block: 31rem;my-125margin-block: 31.25rem;my-126margin-block: 31.5rem;my-127margin-block: 31.75rem;my-128margin-block: 32rem;my-129margin-block: 32.25rem;my-130margin-block: 32.5rem;my-131margin-block: 32.75rem;my-132margin-block: 33rem;my-133margin-block: 33.25rem;my-134margin-block: 33.5rem;my-135margin-block: 33.75rem;my-136margin-block: 34rem;my-137margin-block: 34.25rem;my-138margin-block: 34.5rem;my-139margin-block: 34.75rem;my-140margin-block: 35rem;my-141margin-block: 35.25rem;my-142margin-block: 35.5rem;my-143margin-block: 35.75rem;my-144margin-block: 36rem;my-145margin-block: 36.25rem;my-146margin-block: 36.5rem;my-147margin-block: 36.75rem;my-148margin-block: 37rem;my-149margin-block: 37.25rem;my-150margin-block: 37.5rem;my-151margin-block: 37.75rem;my-152margin-block: 38rem;my-153margin-block: 38.25rem;my-154margin-block: 38.5rem;my-155margin-block: 38.75rem;my-156margin-block: 39rem;my-157margin-block: 39.25rem;my-158margin-block: 39.5rem;my-159margin-block: 39.75rem;my-160margin-block: 40rem;my-161margin-block: 40.25rem;my-162margin-block: 40.5rem;my-163margin-block: 40.75rem;my-164margin-block: 41rem;my-165margin-block: 41.25rem;my-166margin-block: 41.5rem;my-167margin-block: 41.75rem;my-168margin-block: 42rem;my-169margin-block: 42.25rem;my-170margin-block: 42.5rem;my-171margin-block: 42.75rem;my-172margin-block: 43rem;my-173margin-block: 43.25rem;my-174margin-block: 43.5rem;my-175margin-block: 43.75rem;my-176margin-block: 44rem;my-177margin-block: 44.25rem;my-178margin-block: 44.5rem;my-179margin-block: 44.75rem;my-180margin-block: 45rem;my-181margin-block: 45.25rem;my-182margin-block: 45.5rem;my-183margin-block: 45.75rem;my-184margin-block: 46rem;my-185margin-block: 46.25rem;my-186margin-block: 46.5rem;my-187margin-block: 46.75rem;my-188margin-block: 47rem;my-189margin-block: 47.25rem;my-190margin-block: 47.5rem;my-191margin-block: 47.75rem;my-192margin-block: 48rem;my-193margin-block: 48.25rem;my-194margin-block: 48.5rem;my-195margin-block: 48.75rem;my-196margin-block: 49rem;my-197margin-block: 49.25rem;my-198margin-block: 49.5rem;my-199margin-block: 49.75rem;my-200margin-block: 50rem;my-201margin-block: 50.25rem;my-202margin-block: 50.5rem;my-203margin-block: 50.75rem;my-204margin-block: 51rem;my-205margin-block: 51.25rem;my-206margin-block: 51.5rem;my-207margin-block: 51.75rem;my-208margin-block: 52rem;my-209margin-block: 52.25rem;my-210margin-block: 52.5rem;my-211margin-block: 52.75rem;my-212margin-block: 53rem;my-213margin-block: 53.25rem;my-214margin-block: 53.5rem;my-215margin-block: 53.75rem;my-216margin-block: 54rem;my-217margin-block: 54.25rem;my-218margin-block: 54.5rem;my-219margin-block: 54.75rem;my-220margin-block: 55rem;my-221margin-block: 55.25rem;my-222margin-block: 55.5rem;my-223margin-block: 55.75rem;my-224margin-block: 56rem;my-225margin-block: 56.25rem;my-226margin-block: 56.5rem;my-227margin-block: 56.75rem;my-228margin-block: 57rem;my-229margin-block: 57.25rem;my-230margin-block: 57.5rem;my-231margin-block: 57.75rem;my-232margin-block: 58rem;my-233margin-block: 58.25rem;my-234margin-block: 58.5rem;my-235margin-block: 58.75rem;my-236margin-block: 59rem;my-237margin-block: 59.25rem;my-238margin-block: 59.5rem;my-239margin-block: 59.75rem;my-240margin-block: 60rem;my-241margin-block: 60.25rem;my-242margin-block: 60.5rem;my-243margin-block: 60.75rem;my-244margin-block: 61rem;my-245margin-block: 61.25rem;my-246margin-block: 61.5rem;my-247margin-block: 61.75rem;my-248margin-block: 62rem;my-249margin-block: 62.25rem;my-250margin-block: 62.5rem;my-251margin-block: 62.75rem;my-252margin-block: 63rem;my-253margin-block: 63.25rem;my-254margin-block: 63.5rem;my-255margin-block: 63.75rem;my-256margin-block: 64rem;my-257margin-block: 64.25rem;my-258margin-block: 64.5rem;my-259margin-block: 64.75rem;my-260margin-block: 65rem;my-261margin-block: 65.25rem;my-262margin-block: 65.5rem;my-263margin-block: 65.75rem;my-264margin-block: 66rem;my-265margin-block: 66.25rem;my-266margin-block: 66.5rem;my-267margin-block: 66.75rem;my-268margin-block: 67rem;my-269margin-block: 67.25rem;my-270margin-block: 67.5rem;my-271margin-block: 67.75rem;my-272margin-block: 68rem;my-273margin-block: 68.25rem;my-274margin-block: 68.5rem;my-275margin-block: 68.75rem;my-276margin-block: 69rem;my-277margin-block: 69.25rem;my-278margin-block: 69.5rem;my-279margin-block: 69.75rem;my-280margin-block: 70rem;my-281margin-block: 70.25rem;my-282margin-block: 70.5rem;my-283margin-block: 70.75rem;my-284margin-block: 71rem;my-285margin-block: 71.25rem;my-286margin-block: 71.5rem;my-287margin-block: 71.75rem;my-288margin-block: 72rem;my-289margin-block: 72.25rem;my-290margin-block: 72.5rem;my-291margin-block: 72.75rem;my-292margin-block: 73rem;my-293margin-block: 73.25rem;my-294margin-block: 73.5rem;my-295margin-block: 73.75rem;my-296margin-block: 74rem;my-297margin-block: 74.25rem;my-298margin-block: 74.5rem;my-299margin-block: 74.75rem;my-300margin-block: 75rem;my-301margin-block: 75.25rem;my-302margin-block: 75.5rem;my-303margin-block: 75.75rem;my-304margin-block: 76rem;my-305margin-block: 76.25rem;my-306margin-block: 76.5rem;my-307margin-block: 76.75rem;my-308margin-block: 77rem;my-309margin-block: 77.25rem;my-310margin-block: 77.5rem;my-311margin-block: 77.75rem;my-312margin-block: 78rem;my-313margin-block: 78.25rem;my-314margin-block: 78.5rem;my-315margin-block: 78.75rem;my-316margin-block: 79rem;my-317margin-block: 79.25rem;my-318margin-block: 79.5rem;my-319margin-block: 79.75rem;my-320margin-block: 80rem;my-321margin-block: 80.25rem;my-322margin-block: 80.5rem;my-323margin-block: 80.75rem;my-324margin-block: 81rem;my-325margin-block: 81.25rem;my-326margin-block: 81.5rem;my-327margin-block: 81.75rem;my-328margin-block: 82rem;my-329margin-block: 82.25rem;my-330margin-block: 82.5rem;my-331margin-block: 82.75rem;my-332margin-block: 83rem;my-333margin-block: 83.25rem;my-334margin-block: 83.5rem;my-335margin-block: 83.75rem;my-336margin-block: 84rem;my-337margin-block: 84.25rem;my-338margin-block: 84.5rem;my-339margin-block: 84.75rem;my-340margin-block: 85rem;my-341margin-block: 85.25rem;my-342margin-block: 85.5rem;my-343margin-block: 85.75rem;my-344margin-block: 86rem;my-345margin-block: 86.25rem;my-346margin-block: 86.5rem;my-347margin-block: 86.75rem;my-348margin-block: 87rem;my-349margin-block: 87.25rem;my-350margin-block: 87.5rem;my-351margin-block: 87.75rem;my-352margin-block: 88rem;my-353margin-block: 88.25rem;my-354margin-block: 88.5rem;my-355margin-block: 88.75rem;my-356margin-block: 89rem;my-357margin-block: 89.25rem;my-358margin-block: 89.5rem;my-359margin-block: 89.75rem;my-360margin-block: 90rem;my-361margin-block: 90.25rem;my-362margin-block: 90.5rem;my-363margin-block: 90.75rem;my-364margin-block: 91rem;my-365margin-block: 91.25rem;my-366margin-block: 91.5rem;my-367margin-block: 91.75rem;my-368margin-block: 92rem;my-369margin-block: 92.25rem;my-370margin-block: 92.5rem;my-371margin-block: 92.75rem;my-372margin-block: 93rem;my-373margin-block: 93.25rem;my-374margin-block: 93.5rem;my-375margin-block: 93.75rem;my-376margin-block: 94rem;my-377margin-block: 94.25rem;my-378margin-block: 94.5rem;my-379margin-block: 94.75rem;my-380margin-block: 95rem;my-381margin-block: 95.25rem;my-382margin-block: 95.5rem;my-383margin-block: 95.75rem;my-384margin-block: 96rem;my-automargin-block: auto;my-pxmargin-block: 1px;Responsiveness
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
@sm:my-(value)Small≥640px
@md:my-(value)Medium≥768px
@lg:my-(value)Large≥1024px
@xxl:my-(value)Extra Large≥1536px
Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
Syntax:
h:my-(value)Negative Values
Use negative variants to apply negative margins.
Use the -- syntax to apply negative numeric values.
Syntax:
my--(value)