Meta tags:
description= Utilities for controlling an element s margin.;
Headings (most frequently used words):
margin, adding, tailwind, using, children, css, resources, plus, community, examples, customizing, your, theme, getting, started, core, concepts, base, styles, layout, flexbox, grid, spacing, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, animation, transforms, interactivity, svg, accessibility, basic, example, to, single, side, horizontal, vertical, negative, values, logical, properties, space, between, custom, value, responsive, design, on, this, page, reversing, order, limitations,
Text of the page (most frequently used words):
#margin (129), number (80), var (71), space (68), calc (66), div (56), reverse (47), spacing (39), block (38), inline (38), value (36), custom (35), the (31), property (31), 1px (30), end (28), start (28), auto (25), class (21), and (16), utilities (16), not (15), last (15), child (14), use (12), adding (11), mbs (11), flex (11), text (11), right (10), left (10), color (10), size (10), mbe (9), like (9), top (9), bottom (9), mask (9), background (9), using (8), width (8), style (8), font (8), grid (8), theme (7), for (7), element (7), tailwind (6), side (6), scroll (6), align (6), border (6), documentation (5), children (5), negative (5), are (5), with (5), order (5), control (5), mode (5), transition (5), position (5), break (5), decoration (5), css (4), your (4), logical (4), properties (4), vertical (4), padding (4), wrap (4), transform (4), origin (4), outline (4), content (4), height (4), max (4), min (4), community (3), kit (3), templates (3), plus (3), showcase (3), blog (3), playground (3), customizing (3), responsive (3), design (3), between (3), horizontal (3), more (3), utility (3), set (3), situations (3), row (3), opacity (3), styles (3), snap (3), type (3), scrollbar (3), behavior (3), sizing (3), rotate (3), shadow (3), image (3), box (3), overflow (3), line (3), list (3), place (3), self (3), items (3), justify (3), columns (3), discord (2), github (2), hero (2), patterns (2), heroicons (2), headless (2), refactoring (2), resources (2), blocks (2), sponsor (2), values (2), single (2), basic (2), example (2), examples (2), this (2), learn (2), about (2), scale (2), variable (2), which (2), can (2), variants (2), prefix (2), variant (2), just (2), that (2), function (2), you (2), variables (2), based (2), designed (2), those (2), gap (2), all (2), complex (2), elements (2), dir (2), sky (2), stroke (2), perspective (2), visibility (2), animation (2), layout (2), sepia (2), saturate (2), invert (2), hue (2), grayscale (2), contrast (2), brightness (2), blur (2), filter (2), repeat (2), clip (2), blend (2), offset (2), rows (2), template (2), object (2), classes (2), trademark, policy, copyright, 2026, labs, inc, quick, reference, page, driven, customized, own, breakpoint, only, apply, medium, screen, sizes, above, shorthand, adds, automatically, also, syntax, 5px, completely, additionally, work, together, consider, instead, divide, better, when, possible, add, every, matching, parent, really, shortcut, but, item, group, aren, handle, cases, grids, layouts, where, rendered, rather, than, their, natural, dom, limitations, say, ensure, added, correct, each, col, reversing, map, either, writing, rtl, ltr, 300, 400, name, dash, convert, one, sides, show, controlling, forced, adjust, accessibility, fill, svg, will, change, user, select, touch, action, stop, gutter, resize, pointer, events, field, cursor, scheme, caret, appearance, accent, interactivity, zoom, translate, skew, backface, transforms, delay, timing, duration, transitions, caption, table, collapse, tables, backdrop, drop, filters, composite, mix, effects, radius, borders, attachment, backgrounds, hyphens, word, white, tab, indent, underline, thickness, clamp, letter, feature, settings, numeric, stretch, weight, smoothing, family, typography, flow, column, shrink, grow, direction, basis, flexbox, index, overscroll, fit, isolation, clear, float, display, inside, before, after, aspect, ratio, preflight, base, functions, directives, detecting, source, files, colors, dark, hover, focus, other, states, styling, core, concepts, upgrade, guide, compatibility, editor, setup, installation, getting, started, new, course, components, partners, docs, ctrl,
Text of the page (random words):
margin spacing tailwind css v 4 3 k ctrl k docs blog showcase partners plus spacing margin documentation components templates ui kit playground course new community getting started installation editor setup compatibility upgrade guide core concepts styling with utility classes hover focus and other states responsive design dark mode theme variables colors adding custom styles detecting classes in source files functions and directives base styles preflight layout aspect ratio columns break after break before break inside box decoration break box sizing display float clear isolation object fit object position overflow overscroll behavior position top right bottom left visibility z index flexbox grid flex basis flex direction flex wrap flex flex grow flex shrink order grid template columns grid column grid template rows grid row grid auto flow grid auto columns grid auto rows gap justify content justify items justify self align content align items align self place content place items place self spacing padding margin sizing width min width max width height min height max height inline size min inline size max inline size block size min block size max block size typography font family font size font smoothing font style font weight font stretch font variant numeric font feature settings letter spacing line clamp line height list style image list style position list style type text align color text decoration line text decoration color text decoration style text decoration thickness text underline offset text transform text overflow text wrap text indent tab size vertical align white space word break overflow wrap hyphens content backgrounds background attachment background clip background color background image background origin background position background repeat background size borders border radius border width border color border style outline width outline color outline style outline offset effects box shadow text shadow opacity mix blend mode background blend mode mask clip mask composite mask image mask mode mask origin mask position mask repeat mask size mask type filters filter blur brightness contrast drop shadow grayscale hue rotate invert saturate sepia backdrop filter blur brightness contrast grayscale hue rotate invert opacity saturate sepia tables border collapse border spacing table layout caption side transitions animation transition property transition behavior transition duration transition timing function transition delay animation transforms backface visibility perspective perspective origin rotate scale skew transform transform origin transform style translate zoom interactivity accent color appearance caret color color scheme cursor field sizing pointer events resize scroll behavior scrollbar color scrollbar width scrollbar gutter scroll margin scroll padding scroll snap align scroll snap stop scroll snap type touch action user select will change svg fill stroke stroke width accessibility forced color adjust spacing margin utilities for controlling an element s margin class styles m number margin calc var spacing number m number margin calc var spacing number m auto margin auto m px margin 1px m px margin 1px m custom property margin var custom property m value margin value mx number margin inline calc var spacing number mx number margin inline calc var spacing number mx auto margin inline auto mx px margin inline 1px mx px margin inline 1px mx custom property margin inline var custom property mx value margin inline value my number margin block calc var spacing number my number margin block calc var spacing number my auto margin block auto my px margin block 1px my px margin block 1px my custom property margin block var custom property my value margin block value ms number margin inline start calc var spacing number ms number margin inline start calc var spacing number ms auto margin inline start auto ms px margin inline start 1px ms px margin inline start 1px ms custom property margin inline start var custom property ms value margin inline start value me number margin inline end calc var spacing number me number margin inline end calc var spacing number me auto margin inline end auto me px margin inline end 1px me px margin inline end 1px me custom property margin inline end var custom property me value margin inline end value mbs number margin block start calc var spacing number mbs number margin block start calc var spacing number mbs auto margin block start auto mbs px margin block start 1px mbs px margin block start 1px mbs custom property margin block start var custom property mbs value margin block start value mbe number margin block end calc var spacing number mbe number margin block end calc var spacing number mbe auto margin block end auto mbe px margin block end 1px mbe px margin block end 1px mbe custom property margin block end var custom property mbe value margin block end value mt number margin top calc var spacing number mt number margin top calc var spacing number mt auto margin top auto mt px margin top 1px mt px margin top 1px mt custom property margin top var custom property mt value margin top value mr number margin right calc var spacing number mr number margin right calc var spacing number mr auto margin right auto mr px margin right 1px mr px margin right 1px mr custom property margin right var custom property mr value margin right value mb number margin bottom calc var spacing number mb number margin bottom calc var spacing number mb auto margin bottom auto mb px margin bottom 1px mb px margin bottom 1px mb custom property margin bottom var custom property mb value margin bottom value ml number margin left calc var spacing number ml number margin left calc var spacing number ml auto margin left auto ml px margin left 1px ml px margin left 1px ml custom property margin left var custom property ml value margin left value space x number not last child tw space x reverse 0 margin inline start calc calc var spacing number var tw space x reverse margin inline end calc calc var spacing number calc 1 var tw space x reverse space x number not last child tw space x reverse 0 margin inline start calc calc var spacing number var tw space x reverse margin inline end calc calc var spacing number calc 1 var tw space x reverse space x px not last child tw space x reverse 0 margin inline start calc 1px var tw space x reverse margin inline end calc 1px calc 1 var tw space x reverse space x px not last child tw space x reverse 0 margin inline start calc 1px var tw space x reverse margin inline end calc 1px calc 1 var tw space x reverse space x custom property not last child tw space x reverse 0 margin inline start calc var custom property var tw space x reverse margin inline end calc var custom property calc 1 var tw space x reverse space x value not last child tw space x reverse 0 margin inline start calc value var tw space x reverse margin inline end calc value calc 1 var tw space x reverse space y number not last child tw space y reverse 0 margin block start calc calc var spacing number var tw space y reverse margin block end calc calc var spacing number calc 1 var tw space y reverse space y number not last child tw space y reverse 0 margin block start calc calc var spacing number var tw space y reverse margin block end calc calc var spacing number calc 1 var tw space y reverse space y px not last child tw space y reverse 0 margin block start calc 1px var tw space y reverse margin block end calc 1px calc 1 var tw space y reverse space y px not last child tw space y reverse 0 margin block start calc 1px var tw space y reverse margin block end calc 1px calc 1 var tw space y reverse space y custom property not last child tw space y reverse 0 margin block start calc var custom property var tw space y reverse margin block end calc var custom property calc 1 var tw space y reverse space y value not last child tw space y reverse 0 margin block start calc value var tw space y reverse margin block end calc value calc 1 var tw space y reverse space x reverse not last child tw space x reverse 1 space y reverse not last child tw space y reverse 1 show more examples basic example use m number utilities like m 4 and m 8 to control the margin on all sides of an element m 8 div class m 8 m 8 div adding margin to a single side use mt number mr number mb number and ml number utilities like ml 2 and mt 6 to control the margin on one side of an element mt 6 mr 4 mb 8 ml 2 div class mt 6 mt 6 div div class mr 4 mr 4 div div class mb 8 mb 8 div div class ml 2 ml 2 div adding horizontal margin use mx number utilities like mx 4 and mx 8 to control the horizontal margin of an element mx 8 div class mx 8 mx 8 div adding vertical margin use my number utilities like my 4 and my 8 to control the vertical margin of an element my 8 div class my 8 my 8 div using negative values to use a negative margin value prefix the class name with a dash to convert it to a negative value mt 8 div class h 16 w 36 bg sky 400 opacity 20 div div class mt 8 bg sky 300 mt 8 div using logical properties use ms number or me number utilities like ms 4 and me 8 to set the margin inline start and margin inline end logical properties left to right ms 8 me 8 right to left ms 8 me 8 div div dir ltr div class ms 8 ms 8 div div class me 8 me 8 div div div dir rtl div class ms 8 ms 8 div div class me 8 me 8 div div div use the mbs number and mbe number utilities to set the margin block start and margin block end logical properties which map to either the top or bottom side based on the writing mode div class mbs 8 mbs 8 div adding space between children use space x number or space y number utilities like space x 4 and space y 8 to control the space between elements 01 02 03 div class flex space x 4 div 01 div div 02 div div 03 div div reversing children order if your elements are in reverse order using say flex row reverse or flex col reverse use the space x reverse or space y reverse utilities to ensure the space is added to the correct side of each element 01 02 03 div class flex flex row reverse space x 4 space x reverse div 01 div div 02 div div 03 div div limitations the space utilities are really just a shortcut for adding margin to all but the last item in a group and aren t designed to handle complex cases like grids layouts that wrap or situations where the children are rendered in a complex custom order rather than their natural dom order for those situations it s better to use the gap utilities when possible or add margin to every element with a matching negative margin on the parent additionally the space utilities are not designed to work together with the divide utilities for those situations consider adding margin padding utilities to the children instead using a custom value use utilities like m value mx value and mb value to set the margin based on a completely custom value div class m 5px div for css variables you can also use the m custom property syntax div class m my margin div this is just a shorthand for m var custom property that adds the var function for you automatically responsive design prefix a margin utility with a breakpoint variant like md to only apply the utility at medium screen sizes and above div class mt 4 md mt 8 div learn more about using variants in the variants documentation customizing your theme the m number mx number my number ms number me number mbs number mbe number mt number mr number mb number and ml number utilities are driven by the spacing theme variable which can be customized in your own theme theme spacing 1 px learn more about customizing the spacing scale in the theme variable documentation padding width on this page quick reference examples basic example adding margin to a single side adding horizontal margin adding vertical margin using negative values using logical properties adding space between children using a custom value responsive design customizing your theme tailwind css documentation playground blog showcase sponsor resources refactoring ui headless ui heroicons hero patterns tailwind plus ui blocks templates ui kit community github discord x tailwind css documentation playground blog showcase sponsor tailwind plus ui blocks templates ui kit resources refactoring ui headless ui heroicons hero patterns community github discord x copyright 2026 tailwind labs inc trademark policy
|
