{"id":86872,"date":"2025-05-10T23:05:49","date_gmt":"2025-05-10T16:05:49","guid":{"rendered":"https:\/\/itviec1.uptech.vn\/?p=86872"},"modified":"2025-07-10T11:13:56","modified_gmt":"2025-07-10T04:13:56","slug":"margin-bootstrap-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/","title":{"rendered":"Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Margin_Bootstrap_la_gi\" >Margin Bootstrap l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Phan_biet_margin_va_padding\" >Ph\u00e2n bi\u1ec7t margin v\u00e0 padding<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Cac_lop_margin_trong_Bootstrap\" >C\u00e1c l\u1edbp margin trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Margin_trong_thiet_ke_dap_ung_Responsive\" >Margin trong thi\u1ebft k\u1ebf \u0111\u00e1p \u1ee9ng (Responsive)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Margin_am_Negative_margin\" >Margin \u00e2m (Negative margin)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Cach_tuy_chinh_margin_trong_Bootstrap\" >C\u00e1ch t\u00f9y ch\u1ec9nh margin trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Nhung_luu_y_khi_su_dung_margin_trong_Bootstrap\" >Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng margin trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Cau_hoi_thuong_gap_ve_margin_Bootstrap\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 margin Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><em><strong>Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng v\u1edbi Bootstrap, vi\u1ec7c ki\u1ec3m so\u00e1t kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed l\u00e0 y\u1ebfu t\u1ed1 quan tr\u1ecdng gi\u00fap giao di\u1ec7n r\u00f5 r\u00e0ng, \u0111\u1eb9p m\u1eaft h\u01a1n. M\u1ed9t trong nh\u1eefng c\u00f4ng c\u1ee5 c\u01a1 b\u1ea3n h\u1ed7 tr\u1ee3 vi\u1ec7c n\u00e0y ch\u00ednh l\u00e0 margin trong Bootstrap m\u00e0 ch\u00fang ta s\u1ebd c\u00f9ng t\u00ecm hi\u1ec3u chi ti\u1ebft trong b\u00e0i vi\u1ebft sau.<\/strong><\/em><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 \u0111\u01b0\u1ee3c h\u01b0\u1edbng d\u1eabn:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Gi\u1edbi thi\u1ec7u v\u1ec1 margin trong Bootstrap<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1ch t\u00f9y ch\u1ec9nh margin<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng margin trong Bootstrap<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-margin-bootstrap-la-gi\"><span class=\"ez-toc-section\" id=\"Margin_Bootstrap_la_gi\"><\/span><strong>Margin Bootstrap l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Margin l\u00e0 kho\u1ea3ng c\u00e1ch b\u00ean ngo\u00e0i c\u1ee7a ph\u1ea7n t\u1eed, t\u1ea1o ra kh\u00f4ng gian gi\u1eefa ph\u1ea7n t\u1eed \u0111\u00f3 v\u1edbi c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c. Trong CSS, margin c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 b\u1ed1n c\u1ea1nh: tr\u00ean (top), ph\u1ea3i (right), d\u01b0\u1edbi (bottom), v\u00e0 tr\u00e1i (left).<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"300\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-2-vippro.png\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86877\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-2-vippro.png 600w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-2-vippro-300x150.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-2-vippro-200x100.png 200w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p><strong>Thu\u1ed9c t\u00ednh CSS c\u01a1 b\u1ea3n cho margin bao g\u1ed3m:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>margin-top<\/b><span style=\"font-weight: 400;\">: Kho\u1ea3ng c\u00e1ch ph\u00eda tr\u00ean<\/span><\/li>\n\n\n\n<li><b>margin-right<\/b><span style=\"font-weight: 400;\">: Kho\u1ea3ng c\u00e1ch b\u00ean ph\u1ea3i<\/span><\/li>\n\n\n\n<li><b>margin-bottom<\/b><span style=\"font-weight: 400;\">: Kho\u1ea3ng c\u00e1ch ph\u00eda d\u01b0\u1edbi<\/span><\/li>\n\n\n\n<li><b>margin-left<\/b><span style=\"font-weight: 400;\">: Kho\u1ea3ng c\u00e1ch b\u00ean tr\u00e1i<\/span><\/li>\n<\/ul>\n\n\n\n<p><b>Vai tr\u00f2 c\u1ee7a margin:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">T\u1ea1o kh\u00f4ng gian tr\u1ed1ng gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed, gi\u00fap giao di\u1ec7n tho\u00e1ng v\u00e0 d\u1ec5 nh\u00ecn h\u01a1n<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Tr\u00e1nh c\u00e1c ph\u1ea7n t\u1eed b\u1ecb d\u00ednh v\u00e0o nhau, g\u00e2y kh\u00f3 ch\u1ecbu v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 canh ch\u1ec9nh b\u1ed1 c\u1ee5c, \u0111\u1eb7c bi\u1ec7t trong c\u00e1c layout linh ho\u1ea1t nh\u01b0 Flexbox hay Grid<\/span><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/itviec.com\/blog\/flex-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/grid-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n<\/strong><\/a><\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-phan-bi\u1ec7t-margin-va-padding\"><span class=\"ez-toc-section\" id=\"Phan_biet_margin_va_padding\"><\/span><b>Ph\u00e2n bi\u1ec7t margin v\u00e0 padding<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Margin v\u00e0 padding \u0111\u1ec1u s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o c\u00e1c kh\u00f4ng gian li\u00ean quan \u0111\u1ebfn ph\u1ea7n t\u1eed, nh\u01b0ng m\u1ed7i lo\u1ea1i s\u1ebd c\u00f3 c\u01a1 ch\u1ebf kh\u00e1c nhau:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Ti\u00eau ch\u00ed<\/b><\/td><td><b>Margin<\/b><\/td><td><b>Padding<\/b><\/td><\/tr><tr><td><b>V\u1ecb tr\u00ed<\/b><\/td><td><span style=\"font-weight: 400;\">B\u00ean ngo\u00e0i \u0111\u01b0\u1eddng vi\u1ec1n, bao b\u1ecdc ph\u1ea7n t\u1eed<\/span><\/td><td><span style=\"font-weight: 400;\">B\u00ean trong \u0111\u01b0\u1eddng vi\u1ec1n (border)<\/span><\/td><\/tr><tr><td><b>M\u1ee5c \u0111\u00edch<\/b><\/td><td><span style=\"font-weight: 400;\">T\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa ph\u1ea7n t\u1eed n\u00e0y v\u1edbi ph\u1ea7n t\u1eed kh\u00e1c<\/span><\/td><td><span style=\"font-weight: 400;\">T\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa n\u1ed9i dung b\u00ean trong ph\u1ea7n t\u1eed v\u00e0 vi\u1ec1n<\/span><\/td><\/tr><tr><td><b>\u1ea2nh h\u01b0\u1edfng k\u00edch th\u01b0\u1edbc<\/b><\/td><td><span style=\"font-weight: 400;\">Kh\u00f4ng l\u00e0m t\u0103ng k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed<\/span><\/td><td><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 t\u0103ng k\u00edch th\u01b0\u1edbc n\u1ebfu kh\u00f4ng d\u00f9ng <\/span><b>box-sizing: border-box<\/b><\/td><\/tr><tr><td><b>Cho ph\u00e9p gi\u00e1 tr\u1ecb \u00e2m<\/b><\/td><td><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 (v\u00ed d\u1ee5: margin: -10px)<\/span><\/td><td><span style=\"font-weight: 400;\">Kh\u00f4ng h\u1ed7 tr\u1ee3<\/span><\/td><\/tr><tr><td><b>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng<\/b><\/td><td><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa v\u1edbi margin: auto, t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t<\/span><\/td><td><span style=\"font-weight: 400;\">T\u1ea1o kh\u00f4ng gian cho n\u00fat, bi\u1ec3u m\u1eabu \u0111\u1ec3 n\u1ed9i dung kh\u00f4ng s\u00e1t vi\u1ec1n<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>H\u00ecnh \u1ea3nh minh h\u1ecda s\u1ef1 kh\u00e1c nhau gi\u1eefa padding v\u00e0 margin trong Bootstrap:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2057\" height=\"890\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/padding-bootstrap-5-vippro.jpg\" alt=\"padding bootstrap - margin bootstrap - itviec blog\" class=\"wp-image-86865\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/padding-bootstrap-5-vippro.jpg 2057w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/padding-bootstrap-5-vippro-300x130.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/padding-bootstrap-5-vippro-2048x886.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/padding-bootstrap-5-vippro-200x87.jpg 200w\" sizes=\"auto, (max-width: 2057px) 100vw, 2057px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/padding-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Padding Bootstrap l\u00e0 g\u00ec: S\u1eed d\u1ee5ng padding trong Bootstrap hi\u1ec7u qu\u1ea3<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-l\u1edbp-margin-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_lop_margin_trong_Bootstrap\"><\/span><b>C\u00e1c l\u1edbp margin trong Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap cung c\u1ea5p c\u00e1c l\u1edbp ti\u1ec7n \u00edch margin (utility classes) \u0111\u1ec3 \u00e1p d\u1ee5ng margin m\u1ed9t c\u00e1ch nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS t\u00f9y ch\u1ec9nh. C\u00e1c l\u1edbp n\u00e0y \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean h\u1ec7 th\u1ed1ng k\u00edch th\u01b0\u1edbc (spacing scale) c\u1ee7a Bootstrap, s\u1eed d\u1ee5ng c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 0, 1 (0.25rem), 2 (0.5rem), 3 (1rem),&#8230;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p chung c\u1ee7a c\u00e1c l\u1edbp margin:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">m<\/span><span style=\"font-weight: 400;\">{side}<\/span><span style=\"font-weight: 400;\">-<\/span><span style=\"font-weight: 400;\">{size}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">{side} (t\u00f9y ch\u1ecdn) : v\u1ecb tr\u00ed \u00e1p d\u1ee5ng bao g\u1ed3m <\/span><b>t <\/b><span style=\"font-weight: 400;\">(b\u00ean tr\u00ean), <\/span><b>b <\/b><span style=\"font-weight: 400;\">(b\u00ean d\u01b0\u1edbi), <\/span><b>s <\/b><span style=\"font-weight: 400;\">(tr\u00e1i trong left-to-right LTR, ph\u1ea3i trong right-to-left RT), <\/span><b>e<\/b><span style=\"font-weight: 400;\"> (ph\u1ea3i trong LTR, tr\u00e1i trong RT), <\/span><b>x<\/b><span style=\"font-weight: 400;\"> (hai b\u00ean tr\u00e1i v\u00e0 ph\u1ea3i), <\/span><b>y<\/b><span style=\"font-weight: 400;\"> (hai b\u00ean tr\u00ean v\u00e0 d\u01b0\u1edbi), kh\u00f4ng c\u00f3 th\u00ec margin s\u1ebd \u00e1p d\u1ee5ng cho c\u1ea3 b\u1ed1n ph\u00eda.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">{size}: kho\u1ea3ng c\u00e1ch c\u1ee7a margin<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a size (gi\u00e1 tr\u1ecb k\u00edch th\u01b0\u1edbc) trong margin Bootstrap bao g\u1ed3m:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">0: 0rem (kh\u00f4ng c\u00f3 margin)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">1: 0.25rem<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">2: 0.5rem<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">3: 1rem<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">4: 1.5rem<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">5: 3rem<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">auto: T\u1ef1 \u0111\u1ed9ng (th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 c\u0103n ch\u1ec9nh)<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng margin bootstrap:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">container<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">m-3 p-2 bg-primary text-white<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;Margin 1rem \u1edf t\u1ea5t c\u1ea3 c\u00e1c h\u01b0\u1edbng&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">mt-5 mb-2 p-2 bg-success text-white<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;Margin-top 3rem, margin-bottom 0.5rem&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">mx-auto p-2 bg-info text-white<\/span><span style=\"font-weight: 400;\">\"<\/span> <i><span style=\"font-weight: 400;\">style<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">200<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">;<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;C\u0103n gi\u1eefa v\u1edbi margin-left v\u00e0 margin-right auto&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>.m-3<\/b><span style=\"font-weight: 400;\">: \u00c1p d\u1ee5ng margin 1rem (16px m\u1eb7c \u0111\u1ecbnh) cho t\u1ea5t c\u1ea3 c\u00e1c h\u01b0\u1edbng.<\/span><\/li>\n\n\n\n<li><b>.mt-5<\/b><span style=\"font-weight: 400;\">: \u00c1p d\u1ee5ng margin-top 3rem (48px).<\/span><\/li>\n\n\n\n<li><b>.mx-auto<\/b><span style=\"font-weight: 400;\">: \u0110\u1eb7t margin-left v\u00e0 margin-right l\u00e0 auto, d\u00f9ng \u0111\u1ec3 c\u0103n gi\u1eefa ph\u1ea7n t\u1eed.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"522\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-6-vippro.png\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86881\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-6-vippro.png 784w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-6-vippro-300x200.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-6-vippro-768x511.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-6-vippro-200x133.png 200w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <\/span><b>inspect<\/b><span style=\"font-weight: 400;\"> c\u1ee7a browser \u0111\u1ec3 ki\u1ec3m tra t\u00ecnh tr\u1ea1ng margin c\u1ee7a t\u1eebng ph\u1ea7n t\u1eed (ph\u1ea7n m\u00e0u cam ch\u00ednh l\u00e0 margin):<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"634\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-1-vippro.png\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86884\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-1-vippro.png 840w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-1-vippro-300x226.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-1-vippro-768x580.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-1-vippro-200x151.png 200w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"570\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-8-vippro.png\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86883\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-8-vippro.png 868w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-8-vippro-300x197.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-8-vippro-768x504.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-8-vippro-200x131.png 200w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"554\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-7-vippro.png\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86882\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-7-vippro.png 798w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-7-vippro-300x208.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-7-vippro-768x533.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-7-vippro-200x139.png 200w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-margin-trong-thi\u1ebft-k\u1ebf-dap-\u1ee9ng-responsive\"><span class=\"ez-toc-section\" id=\"Margin_trong_thiet_ke_dap_ung_Responsive\"><\/span><b>Margin trong thi\u1ebft k\u1ebf \u0111\u00e1p \u1ee9ng (Responsive)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1ed9t \u0111i\u1ec3m m\u1ea1nh c\u1ee7a Bootstrap l\u00e0 h\u1ed7 tr\u1ee3 margin theo t\u1eebng k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh b\u1eb1ng breakpoints. B\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t vi\u1ec7c th\u00eam ho\u1eb7c x\u00f3a margin t\u00f9y theo t\u1eebng lo\u1ea1i m\u00e0n h\u00ecnh. C\u00fa ph\u00e1p chung:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">m<\/span><span style=\"font-weight: 400;\">{side}<\/span><span style=\"font-weight: 400;\">-<\/span><span style=\"font-weight: 400;\">{breakpoint}<\/span><span style=\"font-weight: 400;\">-<\/span><span style=\"font-weight: 400;\">{size}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">{side} v\u00e0 {size} s\u1ebd gi\u1ed1ng nh\u01b0 c\u00fa ph\u00e1p chu\u1ea9n<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">{breakpoint} (t\u00f9y ch\u1ecdn): responsive theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh <\/span><b>sm<\/b><span style=\"font-weight: 400;\"> (\u2265576px), <\/span><b>md <\/b><span style=\"font-weight: 400;\">(\u2265768px), <\/span><b>lg<\/b><span style=\"font-weight: 400;\"> (\u2265992px), <\/span><b>xl<\/b><span style=\"font-weight: 400;\"> (\u22651200px), <\/span><b>xxl<\/b><span style=\"font-weight: 400;\"> (\u22651400px)<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, \u0111\u1ec3 t\u1ea1o margin 0.5rem tr\u00ean giao di\u1ec7n \u0111i\u1ec7n tho\u1ea1i v\u00e0 1.5rem tr\u00ean m\u00e0n h\u00ecnh l\u1edbn h\u01a1n:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">m-2 m-md-4<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Margin 0.5rem tr\u00ean mobile, 1.5rem tr\u00ean m\u00e0n h\u00ecnh l\u1edbn h\u01a1n<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-margin-am-negative-margin\"><span class=\"ez-toc-section\" id=\"Margin_am_Negative_margin\"><\/span><b>Margin \u00e2m (Negative margin)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap c\u0169ng h\u1ed7 tr\u1ee3 margin \u00e2m \u0111\u1ec3 k\u00e9o c\u00e1c ph\u1ea7n t\u1eed g\u1ea7n nhau h\u01a1n ho\u1eb7c \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed, margin c\u00f3 gi\u00e1 tr\u1ecb \u00e2m (&lt; 0) s\u1ebd khi\u1ebfn c\u00e1c ph\u1ea7n t\u1eed g\u1ea7n l\u1ea1i v\u1edbi nhau (c\u00f3 th\u1ec3 \u0111\u00e8 l\u00ean nhau n\u1ebfu gi\u00e1 tr\u1ecb \u00e2m \u0111\u1ee7 l\u1edbn).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">m<\/span><span style=\"font-weight: 400;\">{side}<\/span><span style=\"font-weight: 400;\">-<\/span><span style=\"font-weight: 400;\">{breakpoint}<\/span><span style=\"font-weight: 400;\">-n<\/span><span style=\"font-weight: 400;\">{size}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u1ec1 c\u01a1 b\u1ea3n th\u00ec c\u00fa ph\u00e1p ho\u00e0n to\u00e0n gi\u1ed1ng v\u1edbi vi\u1ec7c th\u00eam 1 margin b\u00ecnh th\u01b0\u1eddng, tuy nhi\u00ean k\u00edch th\u01b0\u1edbc s\u1ebd b\u1ed5 sung th\u00eam <\/span><b>n<\/b><span style=\"font-weight: 400;\"> (negative) \u1edf ph\u00eda tr\u01b0\u1edbc.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u01b0u \u00fd, negative margins (c\u00e1c class ki\u1ec3u mt-n1, ml-n2,&#8230;) kh\u00f4ng t\u1ef1 \u0111\u1ed9ng b\u1eadt s\u1eb5n trong bootstrap. \u0110\u1ec3 d\u00f9ng c\u00e1c class margin \u00e2m trong Bootstrap (v\u00ed d\u1ee5 mt-n3, mb-n2&#8230;), th\u00ec b\u1ea1n ph\u1ea3i b\u1eadt ch\u00fang trong c\u1ea5u h\u00ecnh SASS c\u1ee7a Bootstrap b\u1eb1ng:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$enable-negative-margins: true;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">container<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">style<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">300<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">200<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">background<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">lightblue<\/span><span style=\"font-weight: 400;\">;<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kh\u1ed1i d\u01b0\u1edbi (m\u00e0u xanh nh\u1ea1t)<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">style<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">200<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">150<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">background<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">lightcoral<\/span><span style=\"font-weight: 400;\">;<\/span><span style=\"font-weight: 400;\">\"<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">mt-n5<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kh\u1ed1i tr\u00ean (m\u00e0u \u0111\u1ecf nh\u1ea1t)<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, kh\u1ed1i m\u00e0u \u0111\u1ecf s\u1eed d\u1ee5ng mt-n5 \u0111\u1ec3 th\u00eam margin-top: -3rem, khi\u1ebfn cho ph\u1ea7n t\u1eed n\u00e0y \u0111\u00e8 l\u00ean ph\u1ea7n t\u1eed m\u00e0u xanh:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"678\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-5-vippro.png\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86880\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-5-vippro.png 692w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-5-vippro-300x294.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-5-vippro-640x627.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-5-vippro-200x196.png 200w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-tuy-ch\u1ec9nh-margin-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cach_tuy_chinh_margin_trong_Bootstrap\"><\/span><b>C\u00e1ch t\u00f9y ch\u1ec9nh margin trong Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1eb7c \u0111\u1ecbnh, c\u00e1c class \u0111\u1ecbnh d\u1ea1ng margin c\u1ee7a Bootstrap \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean h\u1ec7 th\u1ed1ng k\u00edch th\u01b0\u1edbc (spacing scale) bao g\u1ed3m c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 0, 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5(3rem). Tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n b\u1ed5 sung ho\u1eb7c thay \u0111\u1ed5i c\u00e1c gi\u00e1 tr\u1ecb margin, b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n theo c\u00e1c c\u00e1ch sau:<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-css\"><b>T\u00f9y ch\u1ec9nh CSS<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng CSS \u0111\u1ec3 t\u1ea1o ra c\u00e1c class ri\u00eang v\u1edbi \u0111\u1ecbnh d\u1ea1ng padding t\u00f9y \u00fd nh\u01b0:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">custom-margin<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">.custom-margin {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;margin-top: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;margin-bottom: 20px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-sass\"><b>S\u1eed d\u1ee5ng Sass<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n \u0111ang build v\u1edbi source SCSS c\u1ee7a Bootstrap. B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh h\u1ec7 th\u1ed1ng spacing b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i bi\u1ebfn <\/span><b>$spacers<\/b><span style=\"font-weight: 400;\"> trong Bootstrap:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$spacers: (\n&nbsp; 0: 0,\n&nbsp; 1: 0.25rem,\n&nbsp; 2: 0.5rem,\n&nbsp; 3: 1rem,\n&nbsp; 4: 1.5rem,\n&nbsp; 5: 3rem,\n&nbsp; 6: 4.5rem \/\/ th\u00eam m\u1edbi m\u1ee9c 6\n);<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Nh\u01b0 v\u1eady, b\u1ea1n s\u1ebd c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1edbp<\/span><b> .m-6<\/b><span style=\"font-weight: 400;\">, <\/span><b>.mt-6<\/b><span style=\"font-weight: 400;\">, <\/span><b>.my-6<\/b><span style=\"font-weight: 400;\">,&#8230;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nh\u1eefng-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-margin-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Nhung_luu_y_khi_su_dung_margin_trong_Bootstrap\"><\/span><b>Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng margin trong Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Margin trong Bootstrap l\u00e0 c\u00f4ng c\u1ee5 h\u1eefu \u00edch gi\u00fap c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c nhanh ch\u00f3ng v\u00e0 linh ho\u1ea1t. Tuy nhi\u00ean, n\u1ebfu s\u1eed d\u1ee5ng kh\u00f4ng \u0111\u00fang c\u00e1ch, margin c\u00f3 th\u1ec3 g\u00e2y ra nh\u1eefng v\u1ea5n \u0111\u1ec1 nh\u01b0 l\u1ed7i hi\u1ec3n th\u1ecb, b\u1ed1 c\u1ee5c b\u1ecb l\u1ec7ch ho\u1eb7c giao di\u1ec7n thi\u1ebfu nh\u1ea5t qu\u00e1n tr\u00ean c\u00e1c thi\u1ebft b\u1ecb. \u0110\u1ec3 t\u1eadn d\u1ee5ng hi\u1ec7u qu\u1ea3 m\u00e0 kh\u00f4ng g\u1eb7p r\u1eafc r\u1ed1i, b\u1ea1n n\u00ean l\u01b0u \u00fd m\u1ed9t s\u1ed1 \u0111i\u1ec3m quan tr\u1ecdng sau:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ch\u1ecdn margin \u0111\u00fang breakpoint<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 giao di\u1ec7n tr\u00f4ng \u0111\u1eb9p tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.<\/span><\/li>\n\n\n\n<li><b>\u01afu ti\u00ean s\u1eed d\u1ee5ng c\u00e1c l\u1edbp c\u00f3 s\u1eb5n<\/b><span style=\"font-weight: 400;\"> c\u1ee7a Bootstrap, ch\u1ec9 th\u00eam CSS ri\u00eang khi th\u1ef1c s\u1ef1 c\u1ea7n thi\u1ebft.<\/span><\/li>\n\n\n\n<li><b>Tr\u00e1nh l\u1ea1m d\u1ee5ng margin \u00e2m:<\/b><span style=\"font-weight: 400;\"> Margin \u00e2m c\u00f3 th\u1ec3 g\u00e2y l\u1ed7i b\u1ed1 c\u1ee5c n\u1ebfu kh\u00f4ng \u0111\u01b0\u1ee3c ki\u1ec3m so\u00e1t c\u1ea9n th\u1eadn.<\/span><\/li>\n\n\n\n<li><b>C\u0103n gi\u1eefa ph\u1ea7n t\u1eed:<\/b><span style=\"font-weight: 400;\"> S\u1eed d\u1ee5ng .mx-auto cho c\u00e1c ph\u1ea7n t\u1eed block \u0111\u1ec3 c\u0103n gi\u1eefa theo chi\u1ec1u ngang.<\/span><\/li>\n\n\n\n<li><b>Margin Collapse:<\/b><span style=\"font-weight: 400;\"> Trong CSS, margin d\u1ecdc (top\/bottom) c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed li\u1ec1n k\u1ec1 c\u00f3 th\u1ec3 \u201cg\u1ed9p\u201d l\u1ea1i, l\u1ea5y gi\u00e1 tr\u1ecb l\u1edbn nh\u1ea5t. V\u00ed d\u1ee5, n\u1ebfu ph\u1ea7n t\u1eed A c\u00f3 margin-bottom: 20px v\u00e0 ph\u1ea7n t\u1eed B c\u00f3 margin-top: 30px, kho\u1ea3ng c\u00e1ch gi\u1eefa ch\u00fang s\u1ebd l\u00e0 30px, kh\u00f4ng ph\u1ea3i 50px. Bootstrap kh\u00f4ng thay \u0111\u1ed5i h\u00e0nh vi n\u00e0y.<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-margin-bootstrap\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_margin_Bootstrap\"><\/span><b>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 margin Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1ef1-khac-bi\u1ec7t-gi\u1eefa-mx-va-ms-la-gi\"><b>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa mx-* v\u00e0 ms-* l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">mx-*: \u00e1p d\u1ee5ng margin tr\u00e1i v\u00e0 ph\u1ea3i c\u00f9ng l\u00fac (x = axis X).<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">ms-*: \u00e1p d\u1ee5ng margin b\u00ean tr\u00e1i trong ng\u00f4n ng\u1eef LTR ho\u1eb7c b\u00ean ph\u1ea3i trong ng\u00f4n ng\u1eef RTL<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">container<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">bg-warning mx-3<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;margin tr\u00e1i v\u00e0 ph\u1ea3i \u0111\u1ec1u 1rem&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">bg-secondary ms-3<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;ch\u1ec9 margin b\u00ean tr\u00e1i 1rem&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"216\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-4-vippro.png\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86879\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-4-vippro.png 796w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-4-vippro-300x81.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-4-vippro-768x208.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-4-vippro-200x54.png 200w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-margin-co-\u1ea3nh-h\u01b0\u1edfng-d\u1ebfn-kich-th\u01b0\u1edbc-ph\u1ea7n-t\u1eed-khong\"><b>Margin c\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed kh\u00f4ng?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Margin l\u00e0 ph\u1ea7n kh\u00f4ng gian bao b\u1ecdc b\u00ean ngo\u00e0i ph\u1ea7n t\u1eed, v\u00ec v\u1eady margin kh\u00f4ng tr\u1ef1c ti\u1ebfp thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed (width, height). Nh\u01b0ng c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn kh\u00f4ng gian t\u1ed5ng m\u00e0 ph\u1ea7n t\u1eed chi\u1ebfm tr\u00ean layout.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-l\u1edbp-m-auto-co-tac-d\u1ee5ng-gi\"><b>L\u1edbp m-auto c\u00f3 t\u00e1c d\u1ee5ng g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u1edbp <\/span><b>m-auto<\/b><span style=\"font-weight: 400;\"> \u0111\u1eb7t margin t\u1ef1 \u0111\u1ed9ng cho t\u1ea5t c\u1ea3 c\u00e1c ph\u00eda (top, bottom, left, right). Th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 c\u0103n gi\u1eefa ph\u1ea7n t\u1eed b\u00ean trong container flex ho\u1eb7c grid. V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">d-flex justify-content-center border<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border m-auto<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;ITViec Blog&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"248\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-3-vippro.jpg\" alt=\"Margin Bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-86878\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-3-vippro.jpg 764w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-3-vippro-300x97.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-3-vippro-640x208.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-3-vippro-200x65.jpg 200w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><b>T\u1ed5ng k\u1ebft<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Margin l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 quan tr\u1ecdng trong thi\u1ebft k\u1ebf giao di\u1ec7n, gi\u00fap t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed, mang l\u1ea1i b\u1ed1 c\u1ee5c r\u00f5 r\u00e0ng v\u00e0 th\u1ea9m m\u1ef9. V\u1edbi h\u1ec7 th\u1ed1ng l\u1edbp ti\u1ec7n \u00edch c\u1ee7a Bootstrap, vi\u1ec7c \u00e1p d\u1ee5ng margin tr\u1edf n\u00ean nhanh ch\u00f3ng, linh ho\u1ea1t v\u00e0 h\u1ed7 tr\u1ee3 responsive tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n \u0111\u1ecdc nh\u1eefng n\u1ed9i dung b\u1ed5 \u00edch v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap, t\u1eeb c\u00fa ph\u00e1p c\u01a1 b\u1ea3n, ph\u00e2n bi\u1ec7t v\u1edbi padding, \u0111\u1ebfn t\u00f9y ch\u1ec9nh v\u00e0 c\u00e1c l\u01b0u \u00fd th\u1ef1c ti\u1ec5n.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Bootstrap l\u00e0 g\u00ec? 7 t\u00ednh n\u0103ng c\u1ea7n bi\u1ebft trong Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng v\u1edbi Bootstrap, vi\u1ec7c ki\u1ec3m so\u00e1t kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed l\u00e0 y\u1ebfu t\u1ed1 quan tr\u1ecdng gi\u00fap giao di\u1ec7n r\u00f5 r\u00e0ng, \u0111\u1eb9p m\u1eaft h\u01a1n. M\u1ed9t trong nh\u1eefng c\u00f4ng c\u1ee5 c\u01a1 b\u1ea3n h\u1ed7 tr\u1ee3 vi\u1ec7c n\u00e0y ch\u00ednh l\u00e0 margin trong Bootstrap m\u00e0 ch\u00fang ta s\u1ebd c\u00f9ng t\u00ecm [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":86876,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-86872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng Margin trong Bootstrap t\u1eeb A-Z, k\u00e8m v\u00ed d\u1ee5, h\u00ecnh \u1ea3nh minh h\u1ecda v\u00e0 gi\u1ea3i th\u00edch d\u1ec5 hi\u1ec3u cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z\" \/>\n<meta property=\"og:description\" content=\"Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng v\u1edbi Bootstrap, vi\u1ec7c ki\u1ec3m so\u00e1t kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed l\u00e0 y\u1ebfu t\u1ed1 quan tr\u1ecdng gi\u00fap giao di\u1ec7n r\u00f5 r\u00e0ng,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-10T16:05:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T04:13:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z - ITviec Blog","description":"Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng Margin trong Bootstrap t\u1eeb A-Z, k\u00e8m v\u00ed d\u1ee5, h\u00ecnh \u1ea3nh minh h\u1ecda v\u00e0 gi\u1ea3i th\u00edch d\u1ec5 hi\u1ec3u cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z","og_description":"Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng v\u1edbi Bootstrap, vi\u1ec7c ki\u1ec3m so\u00e1t kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed l\u00e0 y\u1ebfu t\u1ed1 quan tr\u1ecdng gi\u00fap giao di\u1ec7n r\u00f5 r\u00e0ng,","og_url":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-05-10T16:05:49+00:00","article_modified_time":"2025-07-10T04:13:56+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-vippro-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"10 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z","datePublished":"2025-05-10T16:05:49+00:00","dateModified":"2025-07-10T04:13:56+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/"},"wordCount":2102,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/","url":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/","name":"Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-vippro-scaled.png","datePublished":"2025-05-10T16:05:49+00:00","dateModified":"2025-07-10T04:13:56+00:00","description":"Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng Margin trong Bootstrap t\u1eeb A-Z, k\u00e8m v\u00ed d\u1ee5, h\u00ecnh \u1ea3nh minh h\u1ecda v\u00e0 gi\u1ea3i th\u00edch d\u1ec5 hi\u1ec3u cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/margin-bootstrap-vippro-scaled.png","width":640,"height":337,"caption":"Margin Bootstrap l\u00e0 g\u00ec - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=86872"}],"version-history":[{"count":1,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86872\/revisions"}],"predecessor-version":[{"id":89247,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86872\/revisions\/89247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/86876"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=86872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=86872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=86872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}