{"id":303,"date":"2013-11-04T17:14:00","date_gmt":"2013-11-04T17:14:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/11\/04\/mo-hinh-hop-trong-css\/"},"modified":"2013-11-04T17:14:00","modified_gmt":"2013-11-04T17:14:00","slug":"mo-hinh-hop-trong-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/","title":{"rendered":"M\u00f4 h\u00ecnh h\u1ed9p trong CSS"},"content":{"rendered":"\n<p>V\u1edbi CSS, c\u00e1c th\u1ebb HTML \u0111\u01b0\u1ee3c xem nh\u01b0 chi\u1ebfc h\u1ed9p. H\u1ed9p n\u00e0y c\u00f3 n\u1ed9i dung, \u0111\u1ec7m (<a href=\"https:\/\/kiencang.net\/cach-dung-margin-va-padding-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">padding<\/a>), \u0111\u01b0\u1eddng vi\u1ec1n (<a href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">border<\/a>) v\u00e0 l\u1ec1 (margin).<\/p>\n\n\n\n<p>S\u1edf d\u0129 b\u00ecnh th\u01b0\u1eddng b\u1ea1n ch\u1eb3ng th\u1ea5y c\u00e1i h\u1ed9p n\u00e0o l\u00e0 b\u1edfi theo m\u1eb7c \u0111\u1ecbnh c\u00e1c gi\u00e1 tr\u1ecb tr\u00ean \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh l\u00e0 0. Ch\u1ec9 khi b\u1ea1n g\u00e1n m\u1ed9t gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 cho n\u00f3, c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0y m\u1edbi hi\u1ec7n nguy\u00ean d\u1ea1ng.<\/p>\n\n\n\n<p>Gi\u1ea3 d\u1ee5 nh\u01b0 d\u00f2ng ch\u1eef n\u00e0y, b\u1ea1n s\u1ebd kh\u00f4ng th\u1ea5y g\u00ec c\u1ea3.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><span style=\"border: 1px solid red; margin-left: 30px; padding: 15px;\">Nh\u01b0ng d\u00f2ng n\u00e0y n\u00f3 c\u00f3 \u0111\u01b0\u1eddng vi\u1ec1n, c\u00f3 \u0111\u1ec7m<\/span><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>V\u00e0 d\u01b0\u1edbi \u0111\u00e2y l\u00e0 h\u00ecnh \u1ea3nh m\u00f4 ph\u1ecfng cho m\u00f4 h\u00ecnh h\u1ed9p trong CSS:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/box-model.png\" alt=\"m\u00f4 h\u00ecnh h\u1ed9p trong CSS\" class=\"wp-image-12312\"\/><\/figure><\/div>\n\n\n\n<p>M\u1ed9t \u0111i\u1ec1u c\u1ea7n ch\u00fa \u00fd trong m\u00f4 h\u00ecnh h\u1ed9p \u0111\u00f3 l\u00e0 k\u00edch th\u01b0\u1edbc c\u1ee7a h\u1ed9p s\u1ebd thay \u0111\u1ed5i khi b\u1ea1n g\u00e1n c\u00e1c gi\u00e1 tr\u1ecb cho thu\u1ed9c t\u00ednh l\u1ec1, \u0111\u1ec7m v\u00e0 vi\u1ec1n, c\u1ee5 th\u1ec3:<\/p>\n\n\n\n<ul><li>Chi\u1ec1u r\u1ed9ng h\u1ed9p = chi\u1ec1u r\u1ed9ng \u00a0+ padding tr\u00e1i\u00a0+ padding ph\u1ea3i\u00a0+ \u00a0border tr\u00e1i\u00a0+ border ph\u1ea3i\u00a0+ margin tr\u00e1i\u00a0+ margin ph\u1ea3i;<\/li><li>Chi\u1ec1u cao h\u1ed9p = chi\u1ec1u cao\u00a0+\u00a0padding tr\u00ean\u00a0+ padding d\u01b0\u1edbi\u00a0+ \u00a0border tr\u00ean\u00a0+ border d\u01b0\u1edbi\u00a0+ margin tr\u00ean\u00a0+ margin d\u01b0\u1edbi;<\/li><\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 m\u1ed9t div \u0111\u01b0\u1ee3c m\u00f4 t\u1ea3 nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\nwidth:200px;\nheight: 100px;\npadding:10px;\nborder:5px solid red;\nmargin:20px;\n}<\/code><\/pre>\n\n\n\n<p>B\u1ea1n \u0111\u1eebng l\u1ea7m t\u01b0\u1edfng div c\u00f3 chi\u1ec1u r\u1ed9ng l\u00e0 200px v\u00e0 chi\u1ec1u cao l\u00e0 100px, \u0111\u1ea5y th\u1ef1c t\u1ebf ch\u1ec9 l\u00e0 kh\u00f4ng gian c\u1ee7a n\u1ed9i dung, c\u00f2n kh\u00f4ng gian c\u1ee7a c\u1ea3 div c\u00f3 k\u00edch th\u01b0\u1edbc l\u1edbn h\u01a1n, c\u1ee5 th\u1ec3:<\/p>\n\n\n\n<ul><li>chi\u1ec1u r\u1ed9ng = 200\u00a0+ 10*2\u00a0+ 5*2\u00a0+ 20*2 = 270px;<\/li><li>chi\u1ec1u cao =\u00a0100\u00a0+ 10*2\u00a0+ 5*2\u00a0+ 20*2 = 170px;<\/li><\/ul>\n\n\n\n<p>V\u1ea5n \u0111\u1ec1 nh\u1ea7m l\u1eabn k\u00edch th\u01b0\u1edbc r\u1ea5t hay x\u1ea3y ra v\u1edbi padding, v\u00ec b\u1ea1n ngh\u0129 khi th\u00eam padding k\u00edch th\u01b0\u1edbc s\u1ebd kh\u00f4ng t\u0103ng l\u00ean.<\/p>\n\n\n\n<p>\u00dd th\u1ee9c \u0111\u01b0\u1ee3c k\u00edch th\u01b0\u1edbc s\u1ebd gi\u00fap b\u1ea1n tr\u00e1nh tr\u01b0\u1eddng h\u1ee3p c\u00e1c th\u1ebb ch\u00e8n, x\u00f4 \u0111\u1ea9y nhau trong layout.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u1edbi CSS, c\u00e1c th\u1ebb HTML \u0111\u01b0\u1ee3c xem nh\u01b0 chi\u1ebfc h\u1ed9p. H\u1ed9p n\u00e0y c\u00f3 n\u1ed9i dung, \u0111\u1ec7m (padding), \u0111\u01b0\u1eddng vi\u1ec1n (border) v\u00e0 l\u1ec1 (margin). S\u1edf d\u0129 b\u00ecnh th\u01b0\u1eddng b\u1ea1n ch\u1eb3ng th\u1ea5y c\u00e1i h\u1ed9p n\u00e0o l\u00e0 b\u1edfi theo m\u1eb7c \u0111\u1ecbnh c\u00e1c gi\u00e1 tr\u1ecb tr\u00ean \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh l\u00e0 0. Ch\u1ec9 khi b\u1ea1n g\u00e1n m\u1ed9t gi\u00e1 tr\u1ecb c\u1ee5 &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>M\u00f4 h\u00ecnh h\u1ed9p trong CSS &#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\/mo-hinh-hop-trong-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"M\u00f4 h\u00ecnh h\u1ed9p trong CSS &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"V\u1edbi CSS, c\u00e1c th\u1ebb HTML \u0111\u01b0\u1ee3c xem nh\u01b0 chi\u1ebfc h\u1ed9p. H\u1ed9p n\u00e0y c\u00f3 n\u1ed9i dung, \u0111\u1ec7m (padding), \u0111\u01b0\u1eddng vi\u1ec1n (border) v\u00e0 l\u1ec1 (margin). S\u1edf d\u0129 b\u00ecnh th\u01b0\u1eddng b\u1ea1n ch\u1eb3ng th\u1ea5y c\u00e1i h\u1ed9p n\u00e0o l\u00e0 b\u1edfi theo m\u1eb7c \u0111\u1ecbnh c\u00e1c gi\u00e1 tr\u1ecb tr\u00ean \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh l\u00e0 0. Ch\u1ec9 khi b\u1ea1n g\u00e1n m\u1ed9t gi\u00e1 tr\u1ecb c\u1ee5 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/\" \/>\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=\"2013-11-04T17:14:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/box-model.png\" \/>\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=\"2 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"M\u00f4 h\u00ecnh h\u1ed9p trong CSS &#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\/mo-hinh-hop-trong-css\/","og_locale":"vi_VN","og_type":"article","og_title":"M\u00f4 h\u00ecnh h\u1ed9p trong CSS &#8226; Ki\u1ebfn c\u00e0ng","og_description":"V\u1edbi CSS, c\u00e1c th\u1ebb HTML \u0111\u01b0\u1ee3c xem nh\u01b0 chi\u1ebfc h\u1ed9p. H\u1ed9p n\u00e0y c\u00f3 n\u1ed9i dung, \u0111\u1ec7m (padding), \u0111\u01b0\u1eddng vi\u1ec1n (border) v\u00e0 l\u1ec1 (margin). S\u1edf d\u0129 b\u00ecnh th\u01b0\u1eddng b\u1ea1n ch\u1eb3ng th\u1ea5y c\u00e1i h\u1ed9p n\u00e0o l\u00e0 b\u1edfi theo m\u1eb7c \u0111\u1ecbnh c\u00e1c gi\u00e1 tr\u1ecb tr\u00ean \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh l\u00e0 0. Ch\u1ec9 khi b\u1ea1n g\u00e1n m\u1ed9t gi\u00e1 tr\u1ecb c\u1ee5 &hellip;","og_url":"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-11-04T17:14:00+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/box-model.png"}],"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":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/","url":"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/","name":"M\u00f4 h\u00ecnh h\u1ed9p trong CSS &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-11-04T17:14:00+00:00","dateModified":"2013-11-04T17:14:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"M\u00f4 h\u00ecnh h\u1ed9p trong CSS"}]},{"@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\/303"}],"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=303"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}