{"id":407119,"date":"2024-06-29T19:22:04","date_gmt":"2024-06-29T19:22:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=407119"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=407119","title":{"rendered":"<span>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS. \u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445 \u0436\u0438\u0442\u0435\u043b\u0435\u0439 \u0445\u0430\u0431\u0440\u0430\u0432\u0438\u043b\u044f! \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043c \u043f\u043e \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS. \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u0432\u0430\u0441 \u0437\u043d\u0430\u044e\u0442 \u043e \u0447\u0451\u043c \u0438\u0434\u0451\u0442 \u0440\u0435\u0447\u044c, \u043d\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u043f\u0438\u0441\u043d\u044b\u0435 \u0438\u0441\u0442\u0438\u043d\u044b \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b, \u0441 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (\u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f), \u0438 \u043d\u0430\u0443\u0447\u0438\u0442 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u043f\u043e\u043b\u0435\u0439, \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446. \u0418\u0442\u0430\u043a, \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u043f\u043e\u0434 \u043a\u0430\u0442 \u0438 \u043f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/da6\/fd4\/0cc\/da6fd40cc3b9707b7d88a30640001681.png\" width=\"1910\" height=\"1000\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/da6\/fd4\/0cc\/da6fd40cc3b9707b7d88a30640001681.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ul>\n<li>\n<p><a href=\"#1\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0447\u0435\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0431\u043b\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c CSS?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#2\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#3\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Padding<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#4\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#5\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Margin<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#6\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0box-sizing<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#7\" rel=\"noopener noreferrer nofollow\">Content-box\u00a0VS\u00a0Border-box<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0417\u0430\u0447\u0435\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0431\u043b\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c CSS?<\/h2>\n<p><a class=\"anchor\" name=\"1\" id=\"1\"><\/a><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/80a\/2ab\/007\/80a2ab007f77399939a7f73c7fa11841.png\" width=\"861\" height=\"438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/80a\/2ab\/007\/80a2ab007f77399939a7f73c7fa11841.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0411\u043b\u043e\u0447\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c CSS \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432: <strong>box-sizing<\/strong>, <strong>padding <\/strong>\u0438 <strong>margin<\/strong>. \u0415\u0441\u043b\u0438 \u0438\u0445 <strong>\u043d\u0435<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u200b <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/441\/f22\/b2b\/441f22b2b680cafc1e673b08618f896a.png\" alt=\"\u0412\u0435\u0431-\u0441\u0430\u0439\u0442 \u0431\u0435\u0437 \u043f\u043e\u043b\u0435\u0439 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432\" title=\"\u0412\u0435\u0431-\u0441\u0430\u0439\u0442 \u0431\u0435\u0437 \u043f\u043e\u043b\u0435\u0439 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432\" width=\"1440\" height=\"935\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/441\/f22\/b2b\/441f22b2b680cafc1e673b08618f896a.png\"\/><figcaption>\u0412\u0435\u0431-\u0441\u0430\u0439\u0442 \u0431\u0435\u0437 \u043f\u043e\u043b\u0435\u0439 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432<\/figcaption><\/figure>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a \u200b  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/101\/189\/2bf\/1011892bffd572f05ce5f5e7d3152ee7.png\" alt=\"\u0412\u0435\u0431-\u0441\u0430\u0439\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438\" title=\"\u0412\u0435\u0431-\u0441\u0430\u0439\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438\" width=\"1440\" height=\"1024\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/101\/189\/2bf\/1011892bffd572f05ce5f5e7d3152ee7.png\"\/><figcaption>\u0412\u0435\u0431-\u0441\u0430\u0439\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/figcaption><\/figure>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438?\u00a0\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0430\u0439\u0442 \u0441 \u0442\u043e\u0447\u043d\u044b\u043c\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u043c\u0438, \u043a\u0430\u043a \u0442\u043e\u0442, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d \u0432\u044b\u0448\u0435\u200b, \u0442\u043e \u0432\u044b \u043f\u043e\u043f\u0430\u043b\u0438 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443.\u00a0\u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS &#8212; \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0<strong>\u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b, \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f.<\/strong><\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ul>\n<li>\n<p>Padding<\/p>\n<\/li>\n<li>\n<p>Margin<\/p>\n<\/li>\n<li>\n<p>Border<\/p>\n<\/li>\n<li>\n<p>box-sizing<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0433\u0434\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS.\u00a0\u041c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00a0<strong>\u0441\u0430\u0439\u0442, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435.\u00a0\u200b<\/strong><\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430\u00a0\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c (<strong>navbar<\/strong>).\u00a0\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>padding<\/strong>, \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0433\u043e \u043d\u0435\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a8f\/ca0\/1cb\/a8fca01cb333433307765a5e7c1aa93c.png\" alt=\"\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding\" title=\"\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding\" width=\"990\" height=\"456\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a8f\/ca0\/1cb\/a8fca01cb333433307765a5e7c1aa93c.png\"\/><figcaption>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding<\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c\u00a0<strong>\u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438<\/strong>.\u00a0\u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 &#8212; \u043d\u0430 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f  \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>padding<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f87\/f44\/4bc\/f87f444bc25a0487cb3bd3f7589b80ef.png\" alt=\"\u0420\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding\" title=\"\u0420\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding\" width=\"990\" height=\"552\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f87\/f44\/4bc\/f87f444bc25a0487cb3bd3f7589b80ef.png\"\/><figcaption>\u0420\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding<\/figcaption><\/figure>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS<\/h3>\n<p><a class=\"anchor\" name=\"2\" id=\"2\"><\/a><\/p>\n<p>\u0413\u043e\u0432\u043e\u0440\u044f \u043e \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u0441\u0442\u043e\u0438\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0435\u0451 \u043a\u0430\u043a <strong>\u043b\u0443\u043a\u043e\u0432\u0438\u0446\u0443<\/strong>. \u0418 \u044d\u0442\u0430 &#171;\u043b\u0443\u043a\u043e\u0432\u0438\u0446\u0430&#187; \u0438\u043c\u0435\u0435\u0442 <strong>4 \u0441\u043b\u043e\u044f<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>1<\/strong>\u00a0\u0441\u043b\u043e\u0439: Content<\/p>\n<\/li>\n<li>\n<p><strong>2\u00a0<\/strong>\u0441\u043b\u043e\u0439: Padding<\/p>\n<\/li>\n<li>\n<p><strong>3\u00a0<\/strong>\u0441\u043b\u043e\u0439: Border<\/p>\n<\/li>\n<li>\n<p><strong>4\u00a0<\/strong>\u0441\u043b\u043e\u0439: Margin<\/p>\n<\/li>\n<\/ul>\n<h3>1 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Content<\/h3>\n<p>\u0412 HTML\u00a0<strong>\u0432\u0441\u0435 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u044f\u0449\u0438\u043a \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c<\/strong>.\u00a0\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0442\u0435\u043d\u043a\u0430.\u00a0\u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d7f\/ad8\/4a5\/d7fad84a50937820fb0b8bd74630fa09.png\" alt=\"\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043b\u043e\u0439\" title=\"\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043b\u043e\u0439\" width=\"857\" height=\"329\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d7f\/ad8\/4a5\/d7fad84a50937820fb0b8bd74630fa09.png\"\/><figcaption>\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<h3>2 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Padding<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS &#8212; \u044d\u0442\u043e\u00a0\u0441\u043b\u043e\u0439\u00a0<strong>\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/strong>.\u00a0\u041e\u043d \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/376\/abe\/18a\/376abe18ada076ff3ffe2307366478e7.png\" alt=\"\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439\" title=\"\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439\" width=\"857\" height=\"406\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/376\/abe\/18a\/376abe18ada076ff3ffe2307366478e7.png\"\/><figcaption>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<h3>3 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Border<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS &#8212; \u044d\u0442\u043e\u00a0<strong>\u043f\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439<\/strong>\u00a0\u0441\u043b\u043e\u0439.\u00a0\u041e\u043d \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 + \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/96f\/b54\/e3b\/96fb54e3b2ef16763c229889efcee4e9.png\" alt=\"\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f - \u0433\u0440\u0430\u043d\u0438\u0446\u0430\" title=\"\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f - \u0433\u0440\u0430\u043d\u0438\u0446\u0430\" width=\"857\" height=\"374\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/96f\/b54\/e3b\/96fb54e3b2ef16763c229889efcee4e9.png\"\/><figcaption>\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f &#8212; \u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/figcaption><\/figure>\n<h4>4 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Margin<\/h4>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0441\u043b\u043e\u0435\u043c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f\u00a0\u0441\u043b\u043e\u0439\u00a0<strong>\u043f\u043e\u043b\u0435\u0439<\/strong>.\u00a0\u041e\u043d \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442 + \u043e\u0442\u0441\u0442\u0443\u043f + \u0433\u0440\u0430\u043d\u0438\u0446\u0443\u00a0<\/strong>\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<strong> \u200b<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/afe\/975\/404\/afe975404bad4c07454385c21b1a6a65.png\" alt=\"\u0427\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u0441\u043b\u043e\u0439\" title=\"\u0427\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u0441\u043b\u043e\u0439\" width=\"857\" height=\"442\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/afe\/975\/404\/afe975404bad4c07454385c21b1a6a65.png\"\/><figcaption>\u0427\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<h2>\u041a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3d0\/beb\/888\/3d0beb888b9f4d6ce66b493c8adcc5af.png\" width=\"748\" height=\"333\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3d0\/beb\/888\/3d0beb888b9f4d6ce66b493c8adcc5af.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u00a0<strong>\u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432.\u00a0<\/strong>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<h3>HTML<\/h3>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 VS Code \u0438\u043b\u0438\u00a0<a href=\"http:\/\/codepen.io\/\" rel=\"noopener noreferrer nofollow\"><u>Codepen.io<\/u><\/a>\u00a0\u0438 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u200b \u0432\u043d\u0443\u0442\u0440\u0438\u00a0<strong>\u0442\u0435\u0433\u0430 body:<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div class=\"box-1\"> Box-1 &lt;\/div><\/code><\/pre>\n<h3>CSS<\/h3>\n<p>\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u200b<\/p>\n<pre><code class=\"css\">* {   margin: 0px;   padding: 0px;   font-family: sans-serif; } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0430\u0448 \u0431\u043b\u043e\u043a \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   width: 300px;   background-color: skyblue;   font-size: 50px; }<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e!\u00a0\u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b08\/993\/2b6\/b089932b693baad0ed0a7a4c339f2b21.png\" width=\"748\" height=\"333\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b08\/993\/2b6\/b089932b693baad0ed0a7a4c339f2b21.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Padding<\/h2>\n<p><a class=\"anchor\" name=\"3\" id=\"3\"><\/a><\/p>\n<p>\u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043c\u00a0<strong>\u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 padding.\u00a0\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043e\u0442\u0441\u0442\u0443\u043f\u044b,\u00a0<strong>\u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c.\u00a0<\/strong>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0443\u00a0\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e\u00a0\u043f\u0430\u043d\u0435\u043b\u044c<strong> \u200b<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/37f\/a27\/d34\/37fa27d34c5ad75d1ad98dc60c186b48.png\" alt=\"\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding\" title=\"\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding\" width=\"990\" height=\"456\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/37f\/a27\/d34\/37fa27d34c5ad75d1ad98dc60c186b48.png\"\/><figcaption>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding<\/figcaption><\/figure>\n<p>\u0412\u043e\u0442 \u0432\u0430\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 &#8212; \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0438\u0436\u0435 \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438\u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/38d\/881\/75e\/38d88175e0af4548934b11d8002d67fe.png\" alt=\"\u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f\" title=\"\u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f\" width=\"990\" height=\"552\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/38d\/881\/75e\/38d88175e0af4548934b11d8002d67fe.png\"\/><figcaption>\u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding \u0432 CSS<\/h3>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>padding-top<\/p>\n<\/li>\n<li>\n<p>padding-right<\/p>\n<\/li>\n<li>\n<p>padding-bottom<\/p>\n<\/li>\n<li>\n<p>padding-left<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ba2\/497\/aff\/ba2497affc9e76e15595f55eceb69a76.png\" alt=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 padding\" title=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 padding\" width=\"748\" height=\"321\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ba2\/497\/aff\/ba2497affc9e76e15595f55eceb69a76.png\"\/><figcaption>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 padding<\/figcaption><\/figure>\n<p>\u0418 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u044b\u00a0&#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435<strong> \u043f\u043e\u0432\u0435\u0440\u0445\u00a0<\/strong>\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<strong>:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/142\/81f\/d03\/14281fd03d6f5cfe453e7d8e355aecd3.png\" alt=\"\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439\" title=\"\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439\" width=\"857\" height=\"406\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/142\/81f\/d03\/14281fd03d6f5cfe453e7d8e355aecd3.png\"\/><figcaption>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443.\u00a0<strong>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f \u200b<\/strong>  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/87e\/2ef\/291\/87e2ef291042ae47b535e05f6fd0341f.gif\" alt=\"\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 - \u044d\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f\" title=\"\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 - \u044d\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f\" width=\"864\" height=\"484\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/87e\/2ef\/291\/87e2ef291042ae47b535e05f6fd0341f.gif\"\/><figcaption>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435, \u200b \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0439 CSS: \u200b  <\/p>\n<pre><code class=\"css\">\/\/ Padding added on top, right, left, bottom of .box-1  .box-1{    padding : 100px; }<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438\u00a0<strong>\u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b<\/strong>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/279\/046\/1e5\/2790461e5fb59e4e338ceb3d1e1f7075.png\" width=\"1013\" height=\"652\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/279\/046\/1e5\/2790461e5fb59e4e338ceb3d1e1f7075.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u0446\u0435\u043d\u0442\u0440\u0435 &#8212; <strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439\u00a0<strong>300px<\/strong>\u00a0\u0432 \u0448\u0438\u0440\u0438\u043d\u0443.\u00a0\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u00a0<strong>\u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/strong>.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u00a0<strong>\u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b):<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2f6\/0b5\/a4a\/2f60b5a4a605ad5d293cdc3ab693575a.png\" alt=\"\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding-right\" title=\"\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding-right\" width=\"664\" height=\"185\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2f6\/0b5\/a4a\/2f60b5a4a605ad5d293cdc3ab693575a.png\"\/><figcaption>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding-right<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435, \u200b \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0439 CSS: \u200b<\/p>\n<pre><code class=\"css\">.box-1{    padding: 0 100px 0 0; }  \/\/ Or you can use \u200b .box-1{    padding-right: 100px; }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c05\/46b\/2ad\/c0546b2ad017b507d18e461992f3a40e.png\" width=\"995\" height=\"668\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c05\/46b\/2ad\/c0546b2ad017b507d18e461992f3a40e.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 &#8212; \u043e\u0442\u0441\u0442\u0443\u043f \u0432 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439\u00a0\u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d <strong>\u0442\u043e\u043b\u044c\u043a\u043e \u0441\u00a0\u043f\u0440\u0430\u0432\u043e\u0439\u00a0\u0441\u0442\u043e\u0440\u043e\u043d\u044b<\/strong> \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u0430\u043a \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438.<\/p>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border<\/h2>\n<p><a class=\"anchor\" name=\"4\" id=\"4\"><\/a><\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e border\u00a0\u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438<strong> \u043a\u043d\u043e\u043f\u043e\u043a<\/strong>.\u00a0\u0412\u043e\u0442 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f GIF \u200b<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3d0\/f8d\/6be\/3d0f8d6bea300820c57f894a97ffe902.gif\" alt=\"\u041a\u043d\u043e\u043f\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border\" title=\"\u041a\u043d\u043e\u043f\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border\" width=\"480\" height=\"284\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3d0\/f8d\/6be\/3d0f8d6bea300820c57f894a97ffe902.gif\"\/><figcaption>\u041a\u043d\u043e\u043f\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border<\/figcaption><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f\u00a0<strong>\u0431\u0435\u043b\u0430\u044f \u0440\u0430\u043c\u043a\u0430<\/strong>\u00a0\u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043d\u043e\u043f\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0432 CSS<\/h3>\n<p>\u0418 \u043f\u043e\u043c\u043d\u0438\u0442\u0435,\u00a0<strong>\u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/strong>\u00a0&#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u0430<\/strong>:\u00a0<strong>\u200b<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/499\/b6a\/ed3\/499b6aed3b1bcc5eae2f0dd82b3f134b.png\" alt=\"\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f - \u0433\u0440\u0430\u043d\u0438\u0446\u0430\" title=\"\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f - \u0433\u0440\u0430\u043d\u0438\u0446\u0430\" width=\"857\" height=\"374\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/499\/b6a\/ed3\/499b6aed3b1bcc5eae2f0dd82b3f134b.png\"\/><figcaption>\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f &#8212; \u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/figcaption><\/figure>\n<p>\u0415\u0441\u0442\u044c \u0442\u0440\u0438 \u0432\u0430\u0436\u043d\u044b\u0445\u00a0<strong>\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430<\/strong>\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<ul>\n<li>\n<p>border size<\/p>\n<\/li>\n<li>\n<p>border style:\u00a0<strong>solid <\/strong>(\u0441\u043f\u043b\u043e\u0448\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f)<strong> \/ dotted <\/strong>(&#171;\u0442\u043e\u0447\u0435\u0447\u043d\u0430\u044f&#187; \u043b\u0438\u043d\u0438\u044f)<strong> \/ dashed <\/strong>(\u043f\u0443\u043d\u043a\u0442\u0438\u0440)<\/p>\n<\/li>\n<li>\n<p>border color<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/62c\/bd4\/9a8\/62cbd49a8bae6a8a10609880789e3711.png\" alt=\"\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b\" title=\"\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b\" width=\"748\" height=\"321\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/62c\/bd4\/9a8\/62cbd49a8bae6a8a10609880789e3711.png\"\/><figcaption>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/figcaption><\/figure>\n<p>\u041a\u0430\u043a \u044f \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u043b \u0432\u044b\u0448\u0435, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u0441\u0442\u0438\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<strong>\u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u044b\u0439<\/strong>\u00a0\u0441\u0442\u0438\u043b\u044c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce8\/bb7\/e10\/ce8bb7e104305e0ec9fae8a675086071.png\" width=\"636\" height=\"318\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce8\/bb7\/e10\/ce8bb7e104305e0ec9fae8a675086071.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0435\u043c CSS: \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   width: 300px;   font-size: 50px;   padding: 50px;   border: 10px dashed black; } <\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c4e\/b1d\/e02\/c4eb1de02052699611e9b0beae789448.png\" width=\"967\" height=\"546\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c4e\/b1d\/e02\/c4eb1de02052699611e9b0beae789448.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0448\u0435\u200b &#8212; \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u0430<\/strong>\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u200b\u200b<strong>\u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/strong> 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Margin<\/h2>\n<p><a class=\"anchor\" name=\"5\" id=\"5\"><\/a><\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<strong>margin,<\/strong>\u00a0\u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c\u00a0<strong>\u043e\u0442\u0441\u0442\u0443\u043f<\/strong>\u00a0\u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0438 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0441\u0442\u043e\u043b\u0430.\u00a0\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0443 \u0433\u0438\u0444\u043a\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2ca\/496\/051\/2ca496051674a2495df26a24d322247a.gif\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\" width=\"680\" height=\"484\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2ca\/496\/051\/2ca496051674a2495df26a24d322247a.gif\"\/><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442<\/figcaption><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043f\u043e\u043b\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u0438 \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044f\u043c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 \u0432\u044b\u0448\u0435 \u200b<\/p>\n<p>\u0412\u043e\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440\u00a0<strong>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/strong>\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 margin: \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/218\/c16\/135\/218c1613575c6c333ff577faf88d820b.gif\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\" width=\"680\" height=\"382\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/218\/c16\/135\/218c1613575c6c333ff577faf88d820b.gif\"\/><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442<\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e margin \u0432 CSS<\/h3>\n<p>Margin \u0438\u043c\u0435\u0435\u0442\u00a0\u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 <strong>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/strong> \u043f\u043e\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>margin-top<\/p>\n<\/li>\n<li>\n<p>margin-right<\/p>\n<\/li>\n<li>\n<p>margin-bottom<\/p>\n<\/li>\n<li>\n<p>margin-left<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a5\/907\/703\/1a5907703aaff57d313eb8a1d176dbcb.png\" alt=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 margin\" title=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 margin\" width=\"748\" height=\"321\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1a5\/907\/703\/1a5907703aaff57d313eb8a1d176dbcb.png\"\/><figcaption>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 margin<\/figcaption><\/figure>\n<p>\u0418 \u043f\u043e\u043c\u043d\u0438\u0442\u0435,\u00a0<strong>margin<\/strong>\u00a0&#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u044b <\/strong>(\u043f\u043e padding)<strong> + \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/strong>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b71\/23d\/68f\/b7123d68f7a9ed9a67c56968fe144b1f.png\" alt=\"\u0421\u0435\u0440\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c - margin\" title=\"\u0421\u0435\u0440\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c - margin\" width=\"857\" height=\"442\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b71\/23d\/68f\/b7123d68f7a9ed9a67c56968fe144b1f.png\"\/><figcaption>\u0421\u0435\u0440\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c &#8212; margin<\/figcaption><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443.\u00a0\u0412\u0435\u0441\u044c \u043d\u0430\u0448 \u043d\u0430\u0431\u043e\u0440 <strong>\u0441\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f<\/strong> \u0438\u0437-\u0437\u0430 <strong>margin<\/strong>,<strong> <\/strong>\u043a\u0430\u043a\u00a0\u0432 \u044d\u0442\u043e\u043c GIF:\u00a0<strong>\u200b<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/444\/d74\/a99\/444d74a9902e8a647ffe31b12acdc454.gif\" alt=\"\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435\" title=\"\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435\" width=\"876\" height=\"488\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/444\/d74\/a99\/444d74a9902e8a647ffe31b12acdc454.gif\"\/><figcaption>\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0435\u043c CSS: \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   padding: 50px;   border: 10px dashed black;      margin: 50px; }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u0435\u043c \u0435\u0449\u0435 \u0440\u0430\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0441\u0447\u0435\u0442\u044b: \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e6b\/dc9\/e3a\/e6bdc9e3a0d52372e809f269320ff88f.png\" width=\"947\" height=\"552\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e6b\/dc9\/e3a\/e6bdc9e3a0d52372e809f269320ff88f.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 + \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/strong>\u00a0\u0431\u044b\u043b\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u043f\u043e\u043b\u0435 50 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439\u00a0.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c\u00a0<strong>\u043f\u043e\u043b\u0435<\/strong>\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435):<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ec8\/a8e\/7bf\/ec8a8e7bfa6fff9d28db12285f588c07.png\" alt=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e margin-left\" title=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e margin-left\" width=\"636\" height=\"252\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ec8\/a8e\/7bf\/ec8a8e7bfa6fff9d28db12285f588c07.png\"\/><figcaption>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e margin-left<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u044b\u0448\u0435, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0435\u043c CSS \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   padding: 50px;   border: 10px dashed black;   margin-left: 50px; }<\/code><\/pre>\n<p>\u041d\u0430 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e\u00a0<strong>\u043f\u043e\u043b\u0435<\/strong>\u00a0\u0432\u00a0<strong>50 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/strong>\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u00a0<strong>\u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435<\/strong>\u00a0\u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2c2\/c4f\/414\/2c2c4f4144b5060d4e7add7793213203.png\" width=\"827\" height=\"677\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2c2\/c4f\/414\/2c2c4f4144b5060d4e7add7793213203.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0box-sizing<\/h2>\n<p><a class=\"anchor\" name=\"6\" id=\"6\"><\/a><\/p>\n<p>\u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u044f, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u0415\u0441\u0442\u044c <strong>\u0442\u0440\u0438 \u0442\u0438\u043f\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439<\/strong> (\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 <strong>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438<\/strong>):<\/p>\n<ul>\n<li>\n<p>border-box<\/p>\n<\/li>\n<li>\n<p>padding-box<\/p>\n<\/li>\n<li>\n<p>content-box<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/h4>\n<p>\u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0442\u044c\u00a0<strong>padding-box<\/strong>,\u00a0\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e Firefox, \u0438 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e.<\/p>\n<h2>\u0412 \u0447\u0435\u043c \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 content-box \u0438 border-box \u0432 CSS?<\/h2>\n<p><a class=\"anchor\" name=\"7\" id=\"7\"><\/a><\/p>\n<p>\u0418 <strong>border-box<\/strong>, \u0438 <strong>content-box<\/strong> \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e.\u00a0\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5a9\/beb\/e5c\/5a9bebe5c3c39096f10d884886230774.png\" alt=\"\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e border-box\" title=\"\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e border-box\" width=\"664\" height=\"300\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5a9\/beb\/e5c\/5a9bebe5c3c39096f10d884886230774.png\"\/><figcaption>\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e border-box<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/125\/e0d\/2a8\/125e0d2a8e1942f1a5dfe91d9157a087.png\" alt=\"\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e content-box\" title=\"\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e content-box\" width=\"664\" height=\"300\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/125\/e0d\/2a8\/125e0d2a8e1942f1a5dfe91d9157a087.png\"\/><figcaption>\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e content-box<\/figcaption><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0432 \u0447\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435?\u00a0\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0437\u0430\u043c\u0435\u0442\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044f, \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043a \u043d\u0430\u0448\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<strong>box-sizing: content-box<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u043d\u00a0<strong>\u0434\u043e\u0431\u0430\u0432\u0438\u0442<\/strong>\u00a0\u043f\u043e\u043b\u044f, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b\u00a0<strong>\u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043f\u043e\u043b\u044f<\/strong>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fac\/420\/31a\/fac42031a3700a153631f6cd2d625c92.gif\" alt=\"\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\" title=\"\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\" width=\"904\" height=\"456\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fac\/420\/31a\/fac42031a3700a153631f6cd2d625c92.gif\"\/><figcaption>\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e<\/figcaption><\/figure>\n<p>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u0437\u0434\u0435\u0441\u044c: \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a9\/8c6\/0ea\/1a98c60ea741994d42cd0af6b7c70a00.png\" alt=\"\u0420\u0430\u0441\u0447\u0435\u0442\u044b \u0441 content-box\" title=\"\u0420\u0430\u0441\u0447\u0435\u0442\u044b \u0441 content-box\" width=\"664\" height=\"323\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1a9\/8c6\/0ea\/1a98c60ea741994d42cd0af6b7c70a00.png\"\/><figcaption>\u0420\u0430\u0441\u0447\u0435\u0442\u044b \u0441 content-box<\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0439\u0442\u0438 \u0438\u0437-\u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435, \u0431\u0443\u0434\u0435\u0442\u00a0<strong>\u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b.\u00a0<\/strong>\u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e\u00a0\u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<strong>box-sizing: border-box<\/strong>.<\/p>\n<p>\u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<strong>box-sizing: border-box<\/strong>, \u043e\u043d\u043e\u00a0<strong>\u0434\u043e\u0431\u0430\u0432\u0438\u0442<\/strong>\u00a0\u043f\u043e\u043b\u044f, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b\u00a0<strong>\u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u0431\u043b\u043e\u043a\u0430<\/strong>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u200b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5c5\/97c\/68c\/5c597c68cbc63f51d8ec9e41aec1e56d.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u0431\u043b\u043e\u043a\u0430\" title=\"\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u0431\u043b\u043e\u043a\u0430\" width=\"904\" height=\"456\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5c5\/97c\/68c\/5c597c68cbc63f51d8ec9e41aec1e56d.gif\"\/><figcaption>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u0431\u043b\u043e\u043a\u0430<\/figcaption><\/figure>\n<p>\u0412\u00a0<strong>box-sizing: border-box<\/strong>\u00a0\u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0442\u043e\u0447\u043d\u044b\u0435\u00a0\u0440\u0430\u0441\u0447\u0435\u0442\u044b HTML &#8212;\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f\u00a0\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432.<\/p>\n<p>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434: \u200b<\/p>\n<pre><code class=\"css\">* {   box-sizing: border-box; }  \/* Or, Write \u200b *\/ * {   box-sizing: content-box; }<\/code><\/pre>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412\u043e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0432\u0441\u0451. \u0414\u043b\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e-\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043a \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0443\u0440\u043e\u043a\u0443 \u043e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430 (\u0414\u0436\u043e\u044f \u0428\u0430\u0445\u0435\u0431\u0430):<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/610550a7920526a288c7e194\" data-style=\"\" id=\"610550a7920526a288c7e194\" width=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/569530\/\"> https:\/\/habr.com\/ru\/articles\/569530\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445 \u0436\u0438\u0442\u0435\u043b\u0435\u0439 \u0445\u0430\u0431\u0440\u0430\u0432\u0438\u043b\u044f! \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043c \u043f\u043e \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS. \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u0432\u0430\u0441 \u0437\u043d\u0430\u044e\u0442 \u043e \u0447\u0451\u043c \u0438\u0434\u0451\u0442 \u0440\u0435\u0447\u044c, \u043d\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u043f\u0438\u0441\u043d\u044b\u0435 \u0438\u0441\u0442\u0438\u043d\u044b \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b, \u0441 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (\u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f), \u0438 \u043d\u0430\u0443\u0447\u0438\u0442 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u043f\u043e\u043b\u0435\u0439, \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446. \u0418\u0442\u0430\u043a, \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u043f\u043e\u0434 \u043a\u0430\u0442 \u0438 \u043f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ul>\n<li>\n<p><a href=\"#1\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0447\u0435\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0431\u043b\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c CSS?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#2\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#3\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Padding<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#4\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#5\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Margin<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#6\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0box-sizing<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#7\" rel=\"noopener noreferrer nofollow\">Content-box\u00a0VS\u00a0Border-box<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0417\u0430\u0447\u0435\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0431\u043b\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c CSS?<\/h2>\n<p><a class=\"anchor\" name=\"1\" id=\"1\"><\/a><\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0411\u043b\u043e\u0447\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c CSS \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432: <strong>box-sizing<\/strong>, <strong>padding <\/strong>\u0438 <strong>margin<\/strong>. \u0415\u0441\u043b\u0438 \u0438\u0445 <strong>\u043d\u0435<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u200b <\/p>\n<figure class=\"full-width\"><figcaption>\u0412\u0435\u0431-\u0441\u0430\u0439\u0442 \u0431\u0435\u0437 \u043f\u043e\u043b\u0435\u0439 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432<\/figcaption><\/figure>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a \u200b  <\/p>\n<figure class=\"full-width\"><figcaption>\u0412\u0435\u0431-\u0441\u0430\u0439\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/figcaption><\/figure>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438?\u00a0\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0430\u0439\u0442 \u0441 \u0442\u043e\u0447\u043d\u044b\u043c\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u043c\u0438, \u043a\u0430\u043a \u0442\u043e\u0442, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d \u0432\u044b\u0448\u0435\u200b, \u0442\u043e \u0432\u044b \u043f\u043e\u043f\u0430\u043b\u0438 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443.\u00a0\u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS &#8212; \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0<strong>\u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b, \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f.<\/strong><\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ul>\n<li>\n<p>Padding<\/p>\n<\/li>\n<li>\n<p>Margin<\/p>\n<\/li>\n<li>\n<p>Border<\/p>\n<\/li>\n<li>\n<p>box-sizing<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0433\u0434\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS.\u00a0\u041c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00a0<strong>\u0441\u0430\u0439\u0442, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435.\u00a0\u200b<\/strong><\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430\u00a0\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c (<strong>navbar<\/strong>).\u00a0\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>padding<\/strong>, \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0433\u043e \u043d\u0435\u0442:<\/p>\n<figure class=\"full-width\"><figcaption>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding<\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c\u00a0<strong>\u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438<\/strong>.\u00a0\u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 &#8212; \u043d\u0430 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f  \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>padding<\/strong>.<\/p>\n<figure class=\"full-width\"><figcaption>\u0420\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding<\/figcaption><\/figure>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS<\/h3>\n<p><a class=\"anchor\" name=\"2\" id=\"2\"><\/a><\/p>\n<p>\u0413\u043e\u0432\u043e\u0440\u044f \u043e \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u0441\u0442\u043e\u0438\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0435\u0451 \u043a\u0430\u043a <strong>\u043b\u0443\u043a\u043e\u0432\u0438\u0446\u0443<\/strong>. \u0418 \u044d\u0442\u0430 &#171;\u043b\u0443\u043a\u043e\u0432\u0438\u0446\u0430&#187; \u0438\u043c\u0435\u0435\u0442 <strong>4 \u0441\u043b\u043e\u044f<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>1<\/strong>\u00a0\u0441\u043b\u043e\u0439: Content<\/p>\n<\/li>\n<li>\n<p><strong>2\u00a0<\/strong>\u0441\u043b\u043e\u0439: Padding<\/p>\n<\/li>\n<li>\n<p><strong>3\u00a0<\/strong>\u0441\u043b\u043e\u0439: Border<\/p>\n<\/li>\n<li>\n<p><strong>4\u00a0<\/strong>\u0441\u043b\u043e\u0439: Margin<\/p>\n<\/li>\n<\/ul>\n<h3>1 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Content<\/h3>\n<p>\u0412 HTML\u00a0<strong>\u0432\u0441\u0435 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u044f\u0449\u0438\u043a \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c<\/strong>.\u00a0\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0442\u0435\u043d\u043a\u0430.\u00a0\u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<h3>2 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Padding<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS &#8212; \u044d\u0442\u043e\u00a0\u0441\u043b\u043e\u0439\u00a0<strong>\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/strong>.\u00a0\u041e\u043d \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<h3>3 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Border<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS &#8212; \u044d\u0442\u043e\u00a0<strong>\u043f\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439<\/strong>\u00a0\u0441\u043b\u043e\u0439.\u00a0\u041e\u043d \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 + \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f &#8212; \u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/figcaption><\/figure>\n<h4>4 \u0441\u043b\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438: Margin<\/h4>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0441\u043b\u043e\u0435\u043c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 CSS \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f\u00a0\u0441\u043b\u043e\u0439\u00a0<strong>\u043f\u043e\u043b\u0435\u0439<\/strong>.\u00a0\u041e\u043d \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442 + \u043e\u0442\u0441\u0442\u0443\u043f + \u0433\u0440\u0430\u043d\u0438\u0446\u0443\u00a0<\/strong>\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<strong> \u200b<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0427\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<h2>\u041a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442<\/h2>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u00a0<strong>\u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432.\u00a0<\/strong>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<h3>HTML<\/h3>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 VS Code \u0438\u043b\u0438\u00a0<a href=\"http:\/\/codepen.io\/\" rel=\"noopener noreferrer nofollow\"><u>Codepen.io<\/u><\/a>\u00a0\u0438 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u200b \u0432\u043d\u0443\u0442\u0440\u0438\u00a0<strong>\u0442\u0435\u0433\u0430 body:<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div class=\"box-1\"> Box-1 &lt;\/div><\/code><\/pre>\n<h3>CSS<\/h3>\n<p>\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u200b<\/p>\n<pre><code class=\"css\">* {   margin: 0px;   padding: 0px;   font-family: sans-serif; } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0430\u0448 \u0431\u043b\u043e\u043a \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   width: 300px;   background-color: skyblue;   font-size: 50px; }<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e!\u00a0\u200b<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Padding<\/h2>\n<p><a class=\"anchor\" name=\"3\" id=\"3\"><\/a><\/p>\n<p>\u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043c\u00a0<strong>\u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 padding.\u00a0\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043e\u0442\u0441\u0442\u0443\u043f\u044b,\u00a0<strong>\u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c.\u00a0<\/strong>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0443\u00a0\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e\u00a0\u043f\u0430\u043d\u0435\u043b\u044c<strong> \u200b<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding<\/figcaption><\/figure>\n<p>\u0412\u043e\u0442 \u0432\u0430\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 &#8212; \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0438\u0436\u0435 \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438\u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding \u0432 CSS<\/h3>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>padding-top<\/p>\n<\/li>\n<li>\n<p>padding-right<\/p>\n<\/li>\n<li>\n<p>padding-bottom<\/p>\n<\/li>\n<li>\n<p>padding-left<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 padding<\/figcaption><\/figure>\n<p>\u0418 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u044b\u00a0&#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435<strong> \u043f\u043e\u0432\u0435\u0440\u0445\u00a0<\/strong>\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<strong>:<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439<\/figcaption><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443.\u00a0<strong>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f \u200b<\/strong>  <\/p>\n<figure class=\"full-width\"><figcaption>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0442\u0443\u043f<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435, \u200b \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0439 CSS: \u200b  <\/p>\n<pre><code class=\"css\">\/\/ Padding added on top, right, left, bottom of .box-1  .box-1{    padding : 100px; }<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438\u00a0<strong>\u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b<\/strong>:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u0446\u0435\u043d\u0442\u0440\u0435 &#8212; <strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439\u00a0<strong>300px<\/strong>\u00a0\u0432 \u0448\u0438\u0440\u0438\u043d\u0443.\u00a0\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u00a0<strong>\u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/strong>.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u00a0<strong>\u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b):<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e padding-right<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435, \u200b \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0439 CSS: \u200b<\/p>\n<pre><code class=\"css\">.box-1{    padding: 0 100px 0 0; }  \/\/ Or you can use \u200b .box-1{    padding-right: 100px; }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u200b<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 &#8212; \u043e\u0442\u0441\u0442\u0443\u043f \u0432 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439\u00a0\u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d <strong>\u0442\u043e\u043b\u044c\u043a\u043e \u0441\u00a0\u043f\u0440\u0430\u0432\u043e\u0439\u00a0\u0441\u0442\u043e\u0440\u043e\u043d\u044b<\/strong> \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u0430\u043a \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438.<\/p>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border<\/h2>\n<p><a class=\"anchor\" name=\"4\" id=\"4\"><\/a><\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e border\u00a0\u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438<strong> \u043a\u043d\u043e\u043f\u043e\u043a<\/strong>.\u00a0\u0412\u043e\u0442 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f GIF \u200b<\/p>\n<figure class=\"\"><figcaption>\u041a\u043d\u043e\u043f\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Border<\/figcaption><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f\u00a0<strong>\u0431\u0435\u043b\u0430\u044f \u0440\u0430\u043c\u043a\u0430<\/strong>\u00a0\u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043d\u043e\u043f\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0432 CSS<\/h3>\n<p>\u0418 \u043f\u043e\u043c\u043d\u0438\u0442\u0435,\u00a0<strong>\u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/strong>\u00a0&#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u0430<\/strong>:\u00a0<strong>\u200b<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0427\u0435\u0440\u043d\u0430\u044f \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f &#8212; \u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/figcaption><\/figure>\n<p>\u0415\u0441\u0442\u044c \u0442\u0440\u0438 \u0432\u0430\u0436\u043d\u044b\u0445\u00a0<strong>\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430<\/strong>\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<ul>\n<li>\n<p>border size<\/p>\n<\/li>\n<li>\n<p>border style:\u00a0<strong>solid <\/strong>(\u0441\u043f\u043b\u043e\u0448\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f)<strong> \/ dotted <\/strong>(&#171;\u0442\u043e\u0447\u0435\u0447\u043d\u0430\u044f&#187; \u043b\u0438\u043d\u0438\u044f)<strong> \/ dashed <\/strong>(\u043f\u0443\u043d\u043a\u0442\u0438\u0440)<\/p>\n<\/li>\n<li>\n<p>border color<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/figcaption><\/figure>\n<p>\u041a\u0430\u043a \u044f \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u043b \u0432\u044b\u0448\u0435, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u0441\u0442\u0438\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<strong>\u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u044b\u0439<\/strong>\u00a0\u0441\u0442\u0438\u043b\u044c:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0435\u043c CSS: \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   width: 300px;   font-size: 50px;   padding: 50px;   border: 10px dashed black; } <\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0448\u0435\u200b &#8212; \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u0430<\/strong>\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u200b\u200b<strong>\u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/strong> 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e Margin<\/h2>\n<p><a class=\"anchor\" name=\"5\" id=\"5\"><\/a><\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<strong>margin,<\/strong>\u00a0\u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c\u00a0<strong>\u043e\u0442\u0441\u0442\u0443\u043f<\/strong>\u00a0\u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0438 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0441\u0442\u043e\u043b\u0430.\u00a0\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0443 \u0433\u0438\u0444\u043a\u0443:<\/p>\n<figure class=\"full-width\"><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442<\/figcaption><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043f\u043e\u043b\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u0438 \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044f\u043c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 \u0432\u044b\u0448\u0435 \u200b<\/p>\n<p>\u0412\u043e\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440\u00a0<strong>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/strong>\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 margin: \u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442<\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e margin \u0432 CSS<\/h3>\n<p>Margin \u0438\u043c\u0435\u0435\u0442\u00a0\u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 <strong>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/strong> \u043f\u043e\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>margin-top<\/p>\n<\/li>\n<li>\n<p>margin-right<\/p>\n<\/li>\n<li>\n<p>margin-bottom<\/p>\n<\/li>\n<li>\n<p>margin-left<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 margin<\/figcaption><\/figure>\n<p>\u0418 \u043f\u043e\u043c\u043d\u0438\u0442\u0435,\u00a0<strong>margin<\/strong>\u00a0&#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u044b <\/strong>(\u043f\u043e padding)<strong> + \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/strong>:<\/p>\n<figure class=\"full-width\"><figcaption>\u0421\u0435\u0440\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c &#8212; margin<\/figcaption><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443.\u00a0\u0412\u0435\u0441\u044c \u043d\u0430\u0448 \u043d\u0430\u0431\u043e\u0440 <strong>\u0441\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f<\/strong> \u0438\u0437-\u0437\u0430 <strong>margin<\/strong>,<strong> <\/strong>\u043a\u0430\u043a\u00a0\u0432 \u044d\u0442\u043e\u043c GIF:\u00a0<strong>\u200b<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0435\u043c CSS: \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   padding: 50px;   border: 10px dashed black;      margin: 50px; }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u0435\u043c \u0435\u0449\u0435 \u0440\u0430\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0441\u0447\u0435\u0442\u044b: \u200b<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0430\u0448\u0435\u0433\u043e\u00a0<strong>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 + \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 + \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/strong>\u00a0\u0431\u044b\u043b\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u043f\u043e\u043b\u0435 50 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439\u00a0.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c\u00a0<strong>\u043f\u043e\u043b\u0435<\/strong>\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435):<\/p>\n<figure class=\"full-width\"><figcaption>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e margin-left<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u044b\u0448\u0435, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0435\u043c CSS \u200b<\/p>\n<pre><code class=\"css\">.box-1 {   padding: 50px;   border: 10px dashed black;   margin-left: 50px; }<\/code><\/pre>\n<p>\u041d\u0430 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e\u00a0<strong>\u043f\u043e\u043b\u0435<\/strong>\u00a0\u0432\u00a0<strong>50 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/strong>\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u00a0<strong>\u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435<\/strong>\u00a0\u200b<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0box-sizing<\/h2>\n<p><a class=\"anchor\" name=\"6\" id=\"6\"><\/a><\/p>\n<p>\u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u044f, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u0415\u0441\u0442\u044c <strong>\u0442\u0440\u0438 \u0442\u0438\u043f\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439<\/strong> (\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 <strong>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438<\/strong>):<\/p>\n<ul>\n<li>\n<p>border-box<\/p>\n<\/li>\n<li>\n<p>padding-box<\/p>\n<\/li>\n<li>\n<p>content-box<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/h4>\n<p>\u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0442\u044c\u00a0<strong>padding-box<\/strong>,\u00a0\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e Firefox, \u0438 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e.<\/p>\n<h2>\u0412 \u0447\u0435\u043c \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 content-box \u0438 border-box \u0432 CSS?<\/h2>\n<p><a class=\"anchor\" name=\"7\" id=\"7\"><\/a><\/p>\n<p>\u0418 <strong>border-box<\/strong>, \u0438 <strong>content-box<\/strong> \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e.\u00a0\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e border-box<\/figcaption><\/figure>\n<figure class=\"full-width\"><figcaption>\u0411\u043b\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e content-box<\/figcaption><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0432 \u0447\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435?\u00a0\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0437\u0430\u043c\u0435\u0442\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044f, \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043a \u043d\u0430\u0448\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<strong>box-sizing: content-box<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u043d\u00a0<strong>\u0434\u043e\u0431\u0430\u0432\u0438\u0442<\/strong>\u00a0\u043f\u043e\u043b\u044f, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b\u00a0<strong>\u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043f\u043e\u043b\u044f<\/strong>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e<\/figcaption><\/figure>\n<p>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u0437\u0434\u0435\u0441\u044c: \u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u0420\u0430\u0441\u0447\u0435\u0442\u044b \u0441 content-box<\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0439\u0442\u0438 \u0438\u0437-\u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435, \u0431\u0443\u0434\u0435\u0442\u00a0<strong>\u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b.\u00a0<\/strong>\u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e\u00a0\u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<strong>box-sizing: border-box<\/strong>.<\/p>\n<p>\u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<strong>box-sizing: border-box<\/strong>, \u043e\u043d\u043e\u00a0<strong>\u0434\u043e\u0431\u0430\u0432\u0438\u0442<\/strong>\u00a0\u043f\u043e\u043b\u044f, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b\u00a0<strong>\u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u0431\u043b\u043e\u043a\u0430<\/strong>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u200b<\/p>\n<figure class=\"full-width\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u0431\u043b\u043e\u043a\u0430<\/figcaption><\/figure>\n<p>\u0412\u00a0<strong>box-sizing: border-box<\/strong>\u00a0\u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0442\u043e\u0447\u043d\u044b\u0435\u00a0\u0440\u0430\u0441\u0447\u0435\u0442\u044b HTML &#8212;\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f\u00a0\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432.<\/p>\n<p>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434: \u200b<\/p>\n<pre><code class=\"css\">* {   box-sizing: border-box; }  \/* Or, Write \u200b *\/ * {   box-sizing: content-box; }<\/code><\/pre>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412\u043e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0432\u0441\u0451. \u0414\u043b\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e-\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043a \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0443\u0440\u043e\u043a\u0443 \u043e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430 (\u0414\u0436\u043e\u044f \u0428\u0430\u0445\u0435\u0431\u0430):<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/610550a7920526a288c7e194\" data-style=\"\" id=\"610550a7920526a288c7e194\" width=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/569530\/\"> https:\/\/habr.com\/ru\/articles\/569530\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-407119","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/407119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=407119"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/407119\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=407119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=407119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=407119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}