{"id":14645,"date":"2021-09-07T09:28:09","date_gmt":"2021-09-07T09:28:09","guid":{"rendered":"https:\/\/freehost.page\/?p=14645"},"modified":"2021-09-07T09:28:09","modified_gmt":"2021-09-07T09:28:09","slug":"block-va-inline-block","status":"publish","type":"post","link":"https:\/\/kiencang.net\/block-va-inline-block\/","title":{"rendered":"S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa inline, block v\u00e0 inline-block l\u00e0 g\u00ec?"},"content":{"rendered":"\n<p>Khi ch\u00fang ta vi\u1ebft HTML v\u00e0 CSS th\u00ec m\u1ea5y thu\u1eadt ng\u1eef nh\u01b0 <code>block<\/code>, <code>inline<\/code> v\u00e0 <code>inline-block<\/code> c\u00f3 th\u1ec3 g\u00e2y b\u1ed1i r\u1ed1i, nh\u01b0ng ch\u00fang l\u1ea1i r\u1ea5t quan tr\u1ecdng n\u1ebfu b\u1ea1n mu\u1ed1n c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c trang! <\/p>\n\n\n\n<p>L\u01a1 t\u01a1 m\u01a1 v\u1ec1 m\u1ea5y th\u1ee9 c\u0103n b\u1ea3n n\u00e0y s\u1ebd l\u00e0m ch\u00fang ta c\u1ea3m th\u1ea5y c\u1ef1c k\u1ef3 v\u1ea5t v\u1ea3 khi mu\u1ed1n c\u00e1c v\u1ecb tr\u00ed tr\u00ean trang \u0111\u1eb7t \u0111\u00fang n\u01a1i m\u00ecnh mu\u1ed1n. Ho\u1eb7c ngay c\u1ea3 khi \u0111\u1eb7t \u0111\u01b0\u1ee3c \u0111\u00fang v\u1ecb tr\u00ed r\u1ed3i, c\u00f3 th\u1ec3 b\u1ea1n v\u1eabn l\u0103n t\u0103n kh\u00f4ng \u1ed5n, v\u00ec kh\u00f4ng hi\u1ec3u r\u00f5 m\u00ecnh v\u1eeba l\u00e0m \u0111i\u1ec1u g\u00ec.<\/p>\n\n\n\n<p>B\u00ean d\u01b0\u1edbi \u0111\u00e2y ch\u00fang ta s\u1ebd xem c\u00e1c v\u00ed d\u1ee5 v\u1ec1 t\u1eebng thu\u1ed9c t\u00ednh \u0111\u1ec3 c\u00f3 th\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n c\u00e1ch l\u00e0m vi\u1ec7c c\u1ee7a ch\u00fang.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/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\" role=\"button\"><label for=\"item-6577d644bbb4c\" ><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><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d644bbb4c\"  type=\"checkbox\" id=\"item-6577d644bbb4c\"><\/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:\/\/kiencang.net\/block-va-inline-block\/#CSS_display_inline\" title=\"CSS display: inline\">CSS display: inline<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/block-va-inline-block\/#CSS_display_block\" title=\"CSS display: block\">CSS display: block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/block-va-inline-block\/#CSS_display_inline-block\" title=\"CSS display: inline-block\">CSS display: inline-block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/block-va-inline-block\/#Ket_luan\" title=\"K\u1ebft lu\u1eadn\">K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_display_inline\"><\/span>CSS display: inline<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>T\u00f4i s\u1ebd s\u1eed d\u1ee5ng th\u1ebb span \u0111\u1ec3 l\u00e0m v\u00ed d\u1ee5, th\u1ebb n\u00e0y c\u00f3 <a href=\"https:\/\/kiencang.net\/thuoc-tinh-dispaly-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">thu\u1ed9c t\u00ednh display<\/a> m\u1eb7c \u0111\u1ecbnh l\u00e0 inline r\u1ed3i n\u00ean ch\u00fang ta kh\u00f4ng ph\u1ea3i vi\u1ebft CSS chuy\u1ec3n display cho n\u00f3, ch\u1ec9 c\u1ea7n vi\u1ebft, r\u1ed3i b\u1eadt l\u00ean th\u00f4ng qua tr\u00ecnh duy\u1ec7t xem c\u00f3 \u0111i\u1ec1u g\u00ec x\u1ea3y ra hay kh\u00f4ng? \u0110\u1ec3 d\u1ec5 nh\u00ecn h\u01a1n, t\u00f4i th\u00eam m\u00e0u \u0111\u1ecf cho v\u0103n b\u1ea3n \u0111\u01b0\u1ee3c bao quanh th\u1ebb span:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;inline trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; }\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: kh\u00f4ng c\u00f3 \u0111i\u1ec1u g\u00ec \u0111\u1eb7c bi\u1ec7t x\u1ea3y ra \u1edf \u0111\u00e2y!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_display_block\"><\/span>CSS display: block<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Gi\u1edd t\u00f4i s\u1ebd chuy\u1ec3n display c\u1ee7a span th\u00e0nh <code>block<\/code>, m\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;block trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; display:block;}\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: gi\u1edd th\u00ec ch\u00fang ta th\u1ea5y kh\u00e1c bi\u1ec7t r\u1ed3i. V\u0103n b\u1ea3n \u0111\u01b0\u1ee3c bao quanh th\u1ebb span \u0111\u00e3 chi\u1ebfm m\u1ed9t d\u00f2ng ri\u00eang n\u00f3. S\u1edf d\u0129 c\u00f3 \u0111i\u1ec1u n\u00e0y v\u00ec display block l\u00e0m cho ph\u1ea7n t\u1eed s\u1edf h\u1eefu d\u00f2ng ri\u00eang ch\u1ee9 kh\u00f4ng n\u1eb1m c\u00f9ng d\u00f2ng nh\u01b0 inline. \u0110i\u1ec1u n\u00e0y c\u0169ng t\u01b0\u01a1ng t\u1ef1 th\u1ebb nh\u01b0 th\u1ebb p, h1 t\u1edbi h6 v\u00e0 li (ol, ul), ch\u00fang c\u0169ng chi\u1ebfm d\u00f2ng ri\u00eang.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_display_inline-block\"><\/span>CSS display: inline-block<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u00e2y gi\u1edd t\u1edbi ph\u1ea7n cu\u1ed1i, khi span chuy\u1ec3n th\u00e0nh inline-block. M\u00e3:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;inline-block trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; display:inline-block;}\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: r\u1ea5t gi\u1ed1ng v\u1edbi inline, \u0111o\u1ea1n v\u0103n b\u1ea3n n\u1eb1m c\u00f9ng d\u00f2ng. Nh\u01b0ng s\u1ef1 kh\u00e1c bi\u1ec7t b\u1ea1n s\u1ebd s\u1edbm bi\u1ebft.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Gi\u1edd b\u1ea1n th\u1eed th\u00eam margin cho span c\u00f3 inline-block xem t\u00ecnh h\u00ecnh g\u00ec x\u1ea3y ra. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;inline-block trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; display:inline-block; margin:30px; }\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>H\u1ec7t nh\u01b0 v\u1eady (t\u1ee9c v\u1eabn \u0111\u1ec3 margin l\u00e0 30px), nh\u01b0ng gi\u1edd b\u1ea1n th\u1eed \u0111\u1ec3 span l\u00e0 <code>inline<\/code> th\u00f4i xem sao, m\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;inline trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; margin:30px; }\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 kh\u00e1c bi\u1ec7t \u1edf ch\u1ed7 <code>margin top<\/code> v\u00e0 <code>bottom<\/code>. Khi display l\u00e0 <code>inline-block<\/code> th\u1ebb c\u00f3 margin theo \u0111\u1ee7 b\u1ed1n h\u01b0\u1edbng (left, right, top, bottom), c\u00f2n khi l\u00e0 <code>inline<\/code>, th\u1ebb ch\u1ec9 c\u00f3 margin theo hai h\u01b0\u1edbng l\u00e0 left v\u00e0 right.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>B\u1ea1n s\u1ebd th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t r\u00f5 n\u00e9t h\u01a1n n\u1eefa khi g\u1eafn th\u00eam chi\u1ec1u r\u1ed9ng, chi\u1ec1u cao, v\u00e0 m\u00e0u n\u1ec1n cho th\u1ebb span v\u1edbi 2 thu\u1ed9c t\u00ednh kh\u00e1c nhau n\u00e0y. V\u00ed d\u1ee5 v\u1edbi inline, kh\u00f4ng \u0111em l\u1ea1i b\u1ea5t k\u1ef3 thay \u0111\u1ed5i n\u00e0o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;inline trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; margin:30px; background-color: yellow; width:200px; height:200px;}\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>C\u00f2n inline-block t\u1ea1o th\u00e0nh kh\u1ed1i (block c\u1ee7a ri\u00eang n\u00f3) d\u00f9 n\u00f3 v\u1eabn n\u1eb1m chung d\u00f2ng c\u00f9ng v\u1edbi c\u00e1c v\u0103n b\u1ea3n kh\u00e1c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;inline-block trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; margin:30px; display:inline-block; background-color:yellow; width:200px; height:200px;}\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Gi\u1edd ch\u00fang ta c\u0169ng l\u00e0m v\u1eady nh\u01b0ng \u1ed1p v\u00e0o thu\u1ed9c t\u00ednh block xem sao:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;With trong CSS&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;style&gt;\n            span {color:red; margin:30px; display:block; background-color:yellow; width:200px; height:200px;}\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n    &lt;body&gt;\n            Xin ch\u00e0o c\u00e1c b\u1ea1n, ch\u00fac c\u00e1c b\u1ea1n m\u1ed9t ng\u00e0y h\u1ecdc vui v\u1ebb, &lt;span&gt;t\u00f4i l\u00e0 th\u1ebb span \u0111\u00e2y&lt;\/span&gt;. T\u00f4i v\u1eabn t\u1ef1 ngh\u0129 b\u1ea3n th\u00e2n m\u00ecnh kh\u00e1c bi\u1ec7t. M\u1eb7c d\u00f9 t\u00f4i kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng g\u00ec \u0111\u1eb7c bi\u1ec7t.\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: span l\u00fac n\u00e0y nh\u01b0 v\u00f9ng t\u1ef1 tr\u1ecb t\u00e1ch ri\u00eang h\u1eb3n d\u00f2ng c\u1ee7a n\u00f3, v\u1edbi kh\u1ed1i c\u00f3 k\u00edch c\u1ee1, m\u00e0u v\u00e0 l\u1ec1 nh\u01b0 ch\u1ec9 \u0111\u1ecbnh.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ket_luan\"><\/span>K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>Thu\u1ed9c t\u00ednh <code>block<\/code> l\u00e0m cho th\u1ebb c\u00f3 t\u00ednh n\u0103ng t\u1ef1 tr\u1ecb d\u00f9 c\u00f3 c\u00f3 \u0111ang thu\u1ed9c v\u1ec1 m\u1ed9t th\u1ebb kh\u00e1c;<\/li><li>Thu\u1ed9c t\u00ednh <code>inline<\/code> l\u00e0m cho th\u1ebb l\u1ec7 thu\u1ed9c v\u00e0o d\u00f2ng c\u1ee7a n\u00f3, kh\u00f4ng c\u00f3 t\u00ednh n\u0103ng nh\u01b0 box (h\u1ed9p), <strong>kh\u00f4ng th\u1ec3 thi\u1ebft l\u1eadp \u0111\u01b0\u1ee3c chi\u1ec1u cao, r\u1ed9ng<\/strong>, kh\u00f4ng c\u00f3 margin top, bottom, kh\u00f4ng c\u00f3 padding top (nh\u01b0ng c\u00f3 padding bottom, c\u0169ng h\u01a1i l\u1ea1);<\/li><li>Thu\u1ed9c t\u00ednh <code>inline-block<\/code> lai gi\u1eefa inline v\u00e0 block, n\u00f3 c\u00f3 thu\u1ed9c t\u00ednh h\u1ed9p, nh\u01b0ng v\u1eabn ph\u1ea3i n\u1eb1m c\u00f9ng d\u00f2ng v\u1edbi c\u00e1c ph\u1ea7n t\u1eed m\u00e0 n\u00f3 \u0111\u00e3 &#8220;inline&#8221;;<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Khi ch\u00fang ta vi\u1ebft HTML v\u00e0 CSS th\u00ec m\u1ea5y thu\u1eadt ng\u1eef nh\u01b0 block, inline v\u00e0 inline-block c\u00f3 th\u1ec3 g\u00e2y b\u1ed1i r\u1ed1i, nh\u01b0ng ch\u00fang l\u1ea1i r\u1ea5t quan tr\u1ecdng n\u1ebfu b\u1ea1n mu\u1ed1n c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c trang! L\u01a1 t\u01a1 m\u01a1 v\u1ec1 m\u1ea5y th\u1ee9 c\u0103n b\u1ea3n n\u00e0y s\u1ebd l\u00e0m ch\u00fang ta c\u1ea3m th\u1ea5y c\u1ef1c k\u1ef3 v\u1ea5t v\u1ea3 khi &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa inline, block v\u00e0 inline-block l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/block-va-inline-block\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa inline, block v\u00e0 inline-block l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Khi ch\u00fang ta vi\u1ebft HTML v\u00e0 CSS th\u00ec m\u1ea5y thu\u1eadt ng\u1eef nh\u01b0 block, inline v\u00e0 inline-block c\u00f3 th\u1ec3 g\u00e2y b\u1ed1i r\u1ed1i, nh\u01b0ng ch\u00fang l\u1ea1i r\u1ea5t quan tr\u1ecdng n\u1ebfu b\u1ea1n mu\u1ed1n c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c trang! L\u01a1 t\u01a1 m\u01a1 v\u1ec1 m\u1ea5y th\u1ee9 c\u0103n b\u1ea3n n\u00e0y s\u1ebd l\u00e0m ch\u00fang ta c\u1ea3m th\u1ea5y c\u1ef1c k\u1ef3 v\u1ea5t v\u1ea3 khi &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/block-va-inline-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-07T09:28:09+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa inline, block v\u00e0 inline-block l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","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:\/\/kiencang.net\/block-va-inline-block\/","og_locale":"vi_VN","og_type":"article","og_title":"S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa inline, block v\u00e0 inline-block l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Khi ch\u00fang ta vi\u1ebft HTML v\u00e0 CSS th\u00ec m\u1ea5y thu\u1eadt ng\u1eef nh\u01b0 block, inline v\u00e0 inline-block c\u00f3 th\u1ec3 g\u00e2y b\u1ed1i r\u1ed1i, nh\u01b0ng ch\u00fang l\u1ea1i r\u1ea5t quan tr\u1ecdng n\u1ebfu b\u1ea1n mu\u1ed1n c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c trang! L\u01a1 t\u01a1 m\u01a1 v\u1ec1 m\u1ea5y th\u1ee9 c\u0103n b\u1ea3n n\u00e0y s\u1ebd l\u00e0m ch\u00fang ta c\u1ea3m th\u1ea5y c\u1ef1c k\u1ef3 v\u1ea5t v\u1ea3 khi &hellip;","og_url":"https:\/\/kiencang.net\/block-va-inline-block\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-07T09:28:09+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/block-va-inline-block\/","url":"https:\/\/kiencang.net\/block-va-inline-block\/","name":"S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa inline, block v\u00e0 inline-block l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-07T09:28:09+00:00","dateModified":"2021-09-07T09:28:09+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/block-va-inline-block\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/block-va-inline-block\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/block-va-inline-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa inline, block v\u00e0 inline-block l\u00e0 g\u00ec?"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14645"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=14645"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14645\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}