Meta tags:
description=Usa la propiedad CSS margin para crear espacio alrededor del contenido de un elemento HTML fuera de sus bordes. Las propiedades son top, bottom, left y right.;

Headings (most frequently used words):

margin, de, propiedad, la, el, valor, ejemplo, auto, inherit, márgenes, con, css, los, lados, individuales, como, shorthand, colapso, negativos, propiedades, lógicas, capítulos, relacionados, práctica, resultado,

Text of the page (most frequently used words):
margin (118), css (42), border (34), color (30), los (28), top (28), left (25), bottom (25), style (24), html (23), the (22), grid (21), text (21), right (20), font (20), #propiedad (19), background (19), márgenes (18), del (17), width (16), para (15), aprender (15), auto (15), padding (15), con (15), title (15), elemento (13), div (13), column (13), propiedades (12), valor (11), inherit (11), que (11), copiar (11), body (10), head (10), flex (10), ejemplo (10), break (10), box (9), image (9), animation (9), lados (8), espacio (8), overflow (8), código (8), position (8), stroke (8), como (7), borde (7), mismo (7), decoration (7), offset (7), negativos (6), page (6), puedes (6), las (6), start (6), contenedor (6), first (6), class (6), gap (6), izquierdo (6), por (6), align (6), type (6), variant (6), w3docs (5), individuales (5), lado (5), ancho (5), dentro (5), block (5), inline (5), document (5), doctype (5), colapsan (5), superior (5), inferior (5), derecho (5), value (5), valores (5), transition (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), todos (4), generator (4), práctica (4), shorthand (4), this (4), izquierda (4), derecha (4), contenido (4), end (4), son (4), siguiente (4), usa (4), 30px (4), cuando (4), element (4), números (4), mode (4), transform (4), fill (4), size (4), height (4), list (4), template (4), row (4), rule (4), nth (4), acerca (3), json (3), code (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), javascript (3), lógicas (3), colapso (3), establecer (3), suman (3), pero (3), centrar (3), horizontalmente (3), bloque (3), texto (3), pulled (3), 15px (3), fff (3), 1c87c9 (3), negativo (3), elementos (3), sus (3), solo (3), padre (3), siempre (3), 50px (3), tiene (3), entre (3), pruébalo (3), uso (3), inside (3), will (3), and (3), tienen (3), cuatro (3), porcentaje (3), especifica (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), letter (3), content (3), columns (3), direction (3), clip (3), only (3), ver (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), fragmentos (2), capítulos (2), relacionados (2), nombres (2), colores (2), qué (2), cómo (2), sizing (2), una (2), tanto (2), inicio (2), fin (2), eje (2), también (2), dirección (2), útiles (2), pueden (2), crear (2), layout (2), uno (2), nunca (2), 20px (2), between (2), not (2), dos (2), encuentran (2), with (2), inherited (2), from (2), its (2), horizontally (2), property (2), space (2), resultado (2), iguales (2), properties (2), white (2), forma (2), larga (2), esto (2), equivale (2), escribir (2), 10px (2), puede (2), así (2), diferentes (2), vecinos (2), length (2), siguientes (2), fuera (2), alrededor (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, empresa, try, tutoriales, ejemplos, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, comprobar, página, estándar, comporta, invierten, automáticamente, shorthands, ltr, rtl, línea, moderno, ofrece, siguen, escritura, lugar, físicos, pantalla, sitios, admiten, idiomas, superponer, tarjetas, sacar, ajustar, alineación, úsalos, moderación, solapamientos, difíciles, depurar, overlap, one, solapándose, frecuentemente, vecino, desplaza, propio, necesitas, garantizado, prefiere, contenedores, vacíos, propios, primer, último, hijo, colapsar, juntos, menos, algo, separe, distinto, visible, horizontales, algunas, reglas, conviene, recordar, 2eae44, único, igual, mayor, esta, sorpresa, más, común, párrafo, ellos, verticales, help, here, parent, 100, lightblue, hereda, centered, setting, you, can, center, container, result, take, defined, that, remains, divided, margins, red, 300, estableciendo, ocupará, definido, restante, dividirá, partes, paragraph, 5px, usar, escribe, tomar, acercan, superponen, consulta, continuación, detalle, sutil, importante, relativos, incluso, 600px, altura, 60px, debe, heredarse, etc, rem, calculado, navegador, todas, aceptan, evidente, parte, ayuda, cada, este, capítulo, cubre, especiales, calculan, regla, sorprende, casi, primera, vez, crea, diferencia, añade, aleja, transparente, muestra, fondo, agrega, vacío, bordes, zoom, index, writing, change, widows, vertical, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, source, slice, outset, collapse, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, selectores, selectors, css3, guía, flexbox, guides, gradientes, tablas, links, sintaxis, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
propiedad css margin w3docs w3docs libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos cuestionarios ejercicios fragmentos herramientas general tools html editor password generator html encoder code diff json beautifier ver los 13 color tools color picker color converter color mixer color hex colors hsl ver los 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder ver los 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión aprender css css basic introducción a css uso de css sintaxis css css id y class texto en css css font css links tablas css css border css padding css margin nombres de colores css gradientes css css guides guía de flexbox propiedades de css3 css selectors selectores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom css margin usa la propiedad css margin para crear espacio alrededor del contenido de un elemento html fuera de sus bordes las propiedades son top bottom left y right la propiedad css margin crea espacio alrededor de un elemento fuera de su borde a diferencia de padding que añade espacio dentro del borde entre el contenido y el borde el margin aleja a los elementos vecinos el margin siempre es transparente nunca muestra un color de fondo solo agrega espacio vacío este capítulo cubre las cuatro propiedades de lado individuales el shorthand margin de uno a cuatro valores los valores especiales auto e inherit cómo se calculan los márgenes en porcentaje los márgenes negativos y la regla de colapso de márgenes que sorprende a casi todos la primera vez que la encuentran los lados individuales con la ayuda de las siguientes propiedades puedes establecer el margin para cada lado de un elemento margin top margin bottom margin left margin right es evidente que para la parte superior se usa margin top para la inferior margin bottom para el lado izquierdo margin left y para el derecho margin right todas las propiedades de margin aceptan los siguientes valores auto el margin es calculado por el navegador se usa para centrar elementos de bloque horizontalmente length especifica un margin en px pt cm rem em etc especifica un margin como porcentaje del ancho del elemento contenedor inherit especifica que el margin debe heredarse del elemento padre un detalle sutil pero importante los márgenes en porcentaje son siempre relativos al ancho del bloque contenedor incluso para margin top y margin bottom por tanto margin top 10 dentro de un contenedor de 600px de ancho es 60px no el 10 de la altura el margin también puede tomar valores negativos que acercan o superponen un elemento a sus vecinos consulta márgenes negativos a continuación margin como propiedad shorthand la propiedad css margin es una propiedad shorthand para las propiedades de margin individuales margin top margin bottom margin left margin right cuando la propiedad margin tiene cuatro valores diferentes el código se escribe así css con márgenes diferentes p margin top 25 px margin right 10 px margin bottom 15 px margin left 20 px copiar si todos los lados tienen el mismo valor por ejemplo 50px en todos los lados en css se puede escribir así css con el mismo margin código p margin 50 px copiar cuando los lados superior e inferior tienen el mismo valor por ejemplo 15px y los lados izquierdo y derecho tienen el mismo valor por ejemplo 10px puedes usar el siguiente código css margin con 2 números código p margin 15 px 10 px copiar esto equivale a css margin con 2 números forma larga código p margin top 15 px margin right 10 px margin bottom 15 px margin left 10 px copiar cuando los lados izquierdo y derecho son iguales por ejemplo 15px el lado superior es 5px y el inferior es 10px puedes escribir css margin con 3 números código p margin 5 px 15 px 10 px copiar esto equivale a css margin con 3 números forma larga código p margin top 5 px margin right 15 px margin bottom 10 px margin left 15 px copiar ejemplo de la propiedad margin código de la propiedad css margin doctype html html head title title of the document title style p background color 1c87c9 color white margin 25 px 10 px 15 px 20 px style head body p paragraph with background color color and margin properties p body html copiar pruébalo tú mismo resultado el valor auto de la propiedad margin puedes centrar horizontalmente un elemento dentro de su contenedor estableciendo la propiedad margin en auto como resultado el elemento ocupará su ancho definido y el espacio restante se dividirá a partes iguales entre los márgenes derecho e izquierdo ejemplo de la propiedad margin con el valor auto ejemplo del uso del valor auto de la propiedad margin doctype html html head title title of the document title style div width 300 px margin auto background color red style head body h2 the auto value h2 p setting the auto value of the margin property you can horizontally center the element inside its container as a result the element will take up the defined width and the space that remains will be divided between the right and left margins p div the auto value horizontally centered this div div body html copiar pruébalo tú mismo el valor inherit de la propiedad margin en el ejemplo siguiente el margin izquierdo del elemento p se hereda de su elemento padre div ejemplo de la propiedad margin con el valor inherit ejemplo del uso del valor inherit de la propiedad margin doctype html html head title title of the document title style div background color lightblue margin left 100 px p inherit margin left inherit padding 10 px 0 style head body h2 the inherit value h2 p here the left margin is inherited from its parent element p div p class inherit with the help of the inherit value the left margin is inherited from the div element p div body html copiar pruébalo tú mismo colapso de márgenes cuando dos márgenes verticales se encuentran no se suman se colapsan en un único margin igual al mayor de los dos esta es la sorpresa más común con los márgenes si un párrafo tiene margin bottom 30px y el siguiente tiene margin top 20px el espacio entre ellos es 30px no 50px doctype html html head title title of the document title style top margin bottom 30 px background 1c87c9 color fff bottom margin top 20 px background 2eae44 color fff style head body p class top my bottom margin is 30px p p class bottom my top margin is 20px the gap between us is 30px not 50px p body html copiar algunas reglas que conviene recordar solo se colapsan los márgenes superior e inferior los márgenes izquierdo y derecho horizontales nunca se colapsan siempre se suman un padre y su primer último hijo pueden colapsar juntos a menos que algo los separe un borde padding overflow distinto de visible o un contenedor flex grid los elementos vacíos colapsan sus propios márgenes superior e inferior en uno solo si necesitas un espacio garantizado prefiere padding un borde o usa un layout flex grid con gap los márgenes dentro de contenedores flex y grid no se colapsan márgenes negativos un margin negativo acerca un elemento en la dirección del margin solapándose frecuentemente con un vecino un margin top o margin left negativo desplaza el propio elemento un margin right o margin bottom negativo acerca el contenido siguiente doctype html html head title title of the document title style box background color 1c87c9 color fff padding 10 px pulled margin top 15 px style head body div class box first box div div class box pulled this box is pulled 15px up to overlap the first one div body html copiar los márgenes negativos son útiles para superponer tarjetas sacar un elemento del padding de su contenedor o ajustar la alineación pero úsalos con moderación ya que pueden crear solapamientos difíciles de depurar propiedades lógicas de margin el css moderno también ofrece propiedades lógicas que siguen la dirección de escritura del texto en lugar de los lados físicos de la pantalla útiles para sitios que admiten idiomas de izquierda a derecha y de derecha a izquierda margin inline start margin inline end el inicio fin del eje en línea texto margin block start margin block end el inicio fin del eje de bloque los shorthands margin inline y margin block p ej margin inline auto para centrar horizontalmente tanto en ltr como en rtl en una página estándar de izquierda a derecha margin inline start se comporta como margin left y margin block start como margin top pero se invierten automáticamente para el contenido de derecha a izquierda capítulos relacionados css padding espacio dentro del borde css box sizing cómo se suman el ancho el padding y el borde margin top margin right margin bottom margin left las propiedades de lado individuales práctica práctica qué propiedades puedes establecer con css margin qué propiedades puedes establecer con css margin margin top margin bottom margin left margin right margin color comprobar was this page helpful yes no previous css padding next nombres de colores css on this page los lados individuales margin como propiedad shorthand el valor auto de la propiedad margin el valor inherit de la propiedad margin colapso de márgenes márgenes negativos propiedades lógicas de margin capítulos relacionados práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad idioma english deutsch русский français español português italiano 2026 w3docs todos los derechos reservados hecho para desarrolladores