{"id":370258,"date":"2024-05-21T04:21:01","date_gmt":"2024-05-21T04:21:01","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=370258"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T04:21:01","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=370258","title":{"rendered":"<span>CSS \u0434\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0438 \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435<\/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<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7f7\/66f\/969\/7f766f9695dc1a8a6036ac901c2a5247.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7f7\/66f\/969\/7f766f9695dc1a8a6036ac901c2a5247.png\"\/><\/figure>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u043f\u0435\u0447\u0430\u0442\u0438 \u043d\u0430 HTML \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0437\u0430\u043c\u0435\u043d\u044b \u0444\u043e\u0440\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u043b\u0430 \u043e\u0442 \u0440\u0443\u043a\u0438 \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435 \u0438\u043b\u0438 \u0432 Excel. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0431-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0444\u043e\u0440\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c URL \u0438\u0437 \u043d\u0430\u0448\u0435\u0439 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043e\u0441\u043d\u043e\u0432\u044b CSS, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438, \u0438 \u0434\u0430\u043c \u043f\u0430\u0440\u0443 \u0441\u043e\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0447\u044c \u0432 \u044d\u0442\u043e\u043c.<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432<\/h3>\n<p>\u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043f\u0440\u0438\u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0434\u043b\u0438\u0432\u044b\u0435 \u0438 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c. \u041d\u043e \u043e\u043d\u0438 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0438 \u043c\u0435\u043d\u044f \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u0443\u0432\u043e\u043b\u0438\u043b\u0438.<\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_invoice.html\" rel=\"noopener noreferrer nofollow\">\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0447\u0435\u0442\u043e\u0432-\u0444\u0430\u043a\u0442\u0443\u0440<\/a><\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_sidebar.html?jobno=BRAINIACS&amp;commissioner=Minister%20McMinisterface&amp;medium=film&amp;execproducer=Golan%20%26%20Globus&amp;color=B\/W&amp;director=Peter%20Jackson&amp;length=80m&amp;funding=80%%20benefactor;%2020%%20panhandling&amp;budget=%241,234,567.00&amp;jobcontactname=Taylor%20Shift&amp;jobcontactphone=555-123-4567&amp;jobcontactemail=production@voussoir.net&amp;unioncontact=Richard%20Pryor&amp;union=TAAGSRFA&amp;synopsis=A%20group%20of%20ten%20quirky%20teenagers%20from%20opposite%20ends%20of%20town%20awaken%20one%20morning%20to%20find%20themselves%20in%20an%20unrecognizable%20world.%20All%20their%20friends%20and%20family%20are%20chasing%20them%20with%20sawed-off%20shotguns%20and%20flamethrowers.%20The%20group%20realizes%20they%20need%20to%20overcome%20their%20differences%20and%20work%20together%20if%20they%20want%20to%20have%20any%20chance%20of%20ending%20the%20human%20race%20and%20eating%20all%20the%20brains.%20Rated%20G.&amp;principlephoto=2024-06-01&amp;wrapdate=2024-06-03&amp;talent=Molly%20Ringwald%20as%20Claire%0AAngus%20Scrimm%20as%20Tiny%20Tim%0ASteve%20McQueen%20as%20Chadster%0AKeith%20David%20as%20Frank%20Armitage%0Alocal%20pigeon%20as%20The%20Great%20Destroyer%0AMichael%20Beck%20as%20Swan%0ADavid%20Cronenberg%20as%20himself&amp;payfreq=weekly&amp;otrate=1.1x&amp;dtrate=1.15x&amp;payrollcontact=shredpile@voussoir.net&amp;remarks=Please%20try%20to%20get%20Tom%20Cruise%20in%20the%20promotional%20material%20because%20we%20need%20something%20to%20draw%20crowds.&amp;signedby=voussoir&amp;signeddate=2024-02-29\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u043a\u0430 \u0441 \u0432\u0432\u043e\u0434\u043e\u043c \u0432 \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443<\/a><\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_contenteditable.html?missionnumber=ABC123&amp;victimname=Minister%20McMinisterface&amp;dob=1970-01-01&amp;occupation=Prime%20Minister%20of%20Governmentown&amp;maritalstatus=Divorced%20once%20removed&amp;language=en_CA-eh&amp;children=9&amp;issuedate=2024-02-27&amp;duedate=2024-07-04&amp;customerrequest=I%20want%20McMinisterface%20to%20experience%20a%20pranking%20the%20likes%20of%20which%20he%27s%20never%20seen%20and%20will%20never%20see%20again&amp;catalogno=GOT-UR-NOSE&amp;catalogvar=yogababe&amp;catalogsubvar=downwarddog&amp;specifics=At%20precisely%200604%20hours,%20as%20McMinisterface%20is%20heading%20out%20the%20front%20door%20of%20his%20flat%20carrying%20a%20breakfast%20scone%20and%20that%20stupid%20yellow%20coffee%20mug,%20the%20Operative%20shall%20place%20himself%20in%20front%20of%20the%20door%20of%20the%20flat,%20assuming%20the%20Downward%20Dog%20position,%20rendering%20him%20undetectable%20to%20all%20passersby.%20McMinisterface%20will%20unexpectedly%20trip%20over%20the%20firmly%20planted%20body%20of%20the%20Operative,%20landing%20on%20the%20concrete,%20breaking%20the%20cartilage%20in%20his%20nose%20and%20dropping%20that%20stupid%20yellow%20coffee%20mug.%20The%20Operative%20will%20approach%20the%20fallen%20McMinisterface%20and%20offer%20to%20help%20him%20up,%20but%20at%20the%20last%20minute%20say%20YOINK,%20GOT%20YOUR%20NOSE%20and%20run%20towards%20the%20bus%20station%20at%20the%20corner%20of%20First%20and%201st%20to%20catch%20the%200606%20bus%20for%20a%20timely%20escape.&amp;callsick=1&amp;leavephone=1&amp;scheduleddelivery=Anti-itch%20ointment,%20to%20be%20left%20on%20porch%20because%20too%20embarrassed%20to%20make%20knowing%20eye%20contact%20with%20delivery%20person&amp;leaveotherphone=1&amp;leaveotherotherphone=0&amp;soundeffects=snoring;%20groaning;%20leavemealone%20120min%20loop&amp;jointeffort=0&amp;jointopname=NA&amp;jointlocation=NA&amp;jointtime=NA&amp;leavehome=0430&amp;leavecafe=0545&amp;arrivesite=0602&amp;getaway=0606&amp;laylow=72hr%20minimum\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u043a\u0430 \u0441 contenteditable<\/a><\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_qr.html\" rel=\"noopener noreferrer nofollow\">\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 QR-\u043a\u043e\u0434\u043e\u0432<\/a><\/p>\n<h3>@page<\/h3>\n<p>\u0412 CSS \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e <code>@page<\/code>, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; }<\/code><\/pre>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0432\u044b\u0431\u0440\u0430\u043b <code>margin: 0<\/code>, \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u043e \u043d\u0438\u0436\u0435. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Letter \u0438\u043b\u0438 A4, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439 \u0441 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u043f\u043e\u043b\u0435\u0439 (margin) @page \u2014 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0448\u0438\u0440\u0438\u043d\u044b, \u0432\u044b\u0441\u043e\u0442\u044b \u0438 \u043f\u043e\u043b\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;html><\/code>\u00a0\u0438\u043b\u0438 <code>&lt;body><\/code>. @page \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 DOM \u2014 \u043e\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 DOM. \u0412 \u0432\u0435\u0431\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;html><\/code>\u00a0\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u043a\u0440\u0430\u044f\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u043e\u043d \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d @page.<\/p>\n<p>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0435 @page \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435 \u043f\u0435\u0447\u0430\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u043c\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 Ctrl+P.<\/p>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html> &lt;style> @page {     \/* \u0441\u043c. \u043d\u0438\u0436\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 *\/ } html {     width: 100%;     height: 100%;     background-color: lightblue;      \/* \u0441\u0435\u0442\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 shunryu111 https:\/\/stackoverflow.com\/a\/32861765\/5430534 *\/     background-size: 0.25in 0.25in;     background-image:     linear-gradient(to right, gray 1px, transparent 1px),     linear-gradient(to bottom, gray 1px, transparent 1px); } &lt;\/style> &lt;body>     &lt;h1>Sample text&lt;\/h1>     &lt;p>sample text&lt;\/p> &lt;\/body> &lt;\/html><\/code><\/pre>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/076\/b1f\/73c\/076b1f73cb4f6ce36a2c41ba4b4e8a2a.png\" alt=\"but i don't want new chrome\" title=\"\" width=\"698\" height=\"620\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/076\/b1f\/73c\/076b1f73cb4f6ce36a2c41ba4b4e8a2a.png\"\/><\/figure>\n<p>\u0410 \u0432\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>:<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: Letter portrait; margin: 1in; }<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/32d\/fc1\/bff\/32dfc1bffcf61b291d80768ace29a9e4.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/32d\/fc1\/bff\/32dfc1bffcf61b291d80768ace29a9e4.png\"\/><\/figure>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: Letter landscape; margin: 1in; }<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5a6\/9a8\/5c4\/5a69a85c4b5f6412b2d8743e84dc9249.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5a6\/9a8\/5c4\/5a69a85c4b5f6412b2d8743e84dc9249.png\"\/><\/figure>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: Letter landscape; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6bc\/3c6\/dca\/6bc3c6dca43111df62eeffde769beb96.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6bc\/3c6\/dca\/6bc3c6dca43111df62eeffde769beb96.png\"\/><\/figure>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 <a class=\"mention\" href=\"\/users\/page\">@page<\/a> \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u043b\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043d\u0442\u0435\u0440\u0430.\u00a0<a href=\"https:\/\/youtu.be\/3z9YjGWaxC0\" rel=\"noopener noreferrer nofollow\">\u0412\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e<\/a>.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <code>size<\/code>\u00a0A5, \u043c\u043e\u0439 \u043f\u0440\u0438\u043d\u0442\u0435\u0440 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 Letter, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 A5 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440 Letter, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043f\u043e\u043b\u0435\u0439, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u043d\u0435 \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>margin<\/code>.<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: A5 portrait; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/945\/e0f\/fee\/945e0ffeeb861d0061662751aa1540f9.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/945\/e0f\/fee\/945e0ffeeb861d0061662751aa1540f9.png\"\/><\/figure>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u044f \u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043d\u0442\u0435\u0440\u0443, \u0447\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0430 A5, \u0442\u043e \u0432\u0441\u0451 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442, \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cfe\/ff5\/fbc\/cfeff5fbcc951b94ee89d7b176bdd388.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cfe\/ff5\/fbc\/cfeff5fbcc951b94ee89d7b176bdd388.png\"\/><\/figure>\n<p>\u0418\u0437 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e Chrome \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0443 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 Margin \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Default. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 Margin \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u0435 \u043f\u0435\u0447\u0430\u0442\u0438, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u043c \u043e\u0442 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u0443\u043c\u0430\u0433\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439.<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: A5 portrait; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b68\/954\/b3b\/b68954b3b63e5e1172b8a2af9cd26682.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b68\/954\/b3b\/b68954b3b63e5e1172b8a2af9cd26682.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/755\/dd4\/1fc\/755dd41fcb6e9fef9018946cd0181f7e.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/755\/dd4\/1fc\/755dd41fcb6e9fef9018946cd0181f7e.png\"\/><\/figure>\n<p>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0443\u043c\u0430\u0433\u0438, <code>margin<\/code>\u00a0\u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0432\u0430\u0436\u0435\u043d. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 5&#215;5 \u0431\u0435\u0437 \u043f\u043e\u043b\u0435\u0439 \u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 5&#215;5 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438. \u0420\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u00a0<code>&lt;html><\/code>\u00a0\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u043e\u0431\u0449\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c  <a class=\"mention\" href=\"\/users\/page\">@page<\/a> <strong>\u0438<\/strong>\u00a0\u043f\u043e\u043b\u0435\u0439.<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: 5in 5in; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/695\/632\/4d4\/6956324d450943ea3f1ceffb3a03e1a3.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/695\/632\/4d4\/6956324d450943ea3f1ceffb3a03e1a3.png\"\/><\/figure>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: 5in 5in; margin: 1in; }<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/78f\/871\/82b\/78f87182b189d053a172675ad91f6afc.png\" width=\"934\" height=\"673\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/78f\/871\/82b\/78f87182b189d053a172675ad91f6afc.png\"\/><\/figure>\n<p>\u042f \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b \u0432\u0441\u0435 \u044d\u0442\u0438 \u0442\u0435\u0441\u0442\u044b \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443. \u0447\u0442\u043e \u0445\u043e\u0447\u0443 \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435 A5 \u0438\u043b\u0438 5&#215;5, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u043d\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0435 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Letter \u0441 margin 0.<\/p>\n<h3>\u041f\u0435\u0447\u0430\u0442\u044c @media<\/h3>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441<\/a>\u00a0<code>print<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0447\u0430\u0442\u0438. \u041c\u043e\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0440\u0430\u0437\u043d\u044b\u0435 \u043e\u043f\u0446\u0438\u0438 \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f; \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0435\u0447\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u044e\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>display:none<\/code>\u00a0\u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"css\">\/* \u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 *\/ header {     display: block; }  @media print {     \/* \u041f\u0440\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 *\/     header     {         display: none;     } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/998\/2ba\/8f6\/9982ba8f6227aec6fae87272f0f59fb2.png\" width=\"828\" height=\"253\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/998\/2ba\/8f6\/9982ba8f6227aec6fae87272f0f59fb2.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c0b\/827\/ef0\/c0b827ef020d20b3220f8e9b3e43d8a4.png\" width=\"1176\" height=\"272\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c0b\/827\/ef0\/c0b827ef020d20b3220f8e9b3e43d8a4.png\"\/><\/figure>\n<h3>\u0428\u0438\u0440\u0438\u043d\u0430, \u0432\u044b\u0441\u043e\u0442\u0430, \u043f\u043e\u043b\u044f \u0438 \u043e\u0442\u0441\u0442\u0443\u043f<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u043e \u0431\u043e\u0440\u043e\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u043c \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u043d\u0443\u0436\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/The_box_model\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u043c\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cd1\/0e6\/185\/cd10e6185381569cea1fddab8ed923d8.png\" width=\"544\" height=\"300\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cd1\/0e6\/185\/cd10e6185381569cea1fddab8ed923d8.png\"\/><\/figure>\n<p>\u042f \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e  <a class=\"mention\" href=\"\/users\/page\">@page<\/a>\u00a0<code>margin: 0<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0443 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u0432 \u0441\u0430\u043c\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 DOM. \u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c <a class=\"mention\" href=\"\/users\/page\">@page<\/a>\u00a0<code>margin: 0.5in<\/code>, \u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438\u0441\u044c \u0434\u0432\u043e\u0439\u043d\u044b\u0435 \u043f\u043e\u043b\u044f, \u0441\u0436\u0438\u043c\u0430\u0432\u0448\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0434\u0435\u043b\u0430\u0432\u0448\u0438\u0435 \u0435\u0433\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0433\u043e, \u0438 \u043c\u043e\u0439 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043b\u0441\u044f \u043d\u0430 \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0445\u043e\u0442\u0435\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f <a class=\"mention\" href=\"\/users\/page\">@page<\/a>, \u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0433\u0440\u0430\u043d\u0438\u0446 DOM; \u043c\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0438 \u044d\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0447\u0430\u0442\u044c\u044e. \u041c\u043d\u0435 \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e <code>&lt;html><\/code>\u00a0\u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0431\u0443\u043c\u0430\u0433\u0443, \u0430 \u043c\u043e\u0438 \u043f\u043e\u043b\u044f \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 DOM, \u0430 \u043d\u0435 \u0437\u0430 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438.<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; } html, body {     width: 8.5in;     height: 11in; }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438 \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 <code>&lt;html><\/code>\u00a0\u0438 <code>&lt;body><\/code> \u0431\u044b\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f <code>&lt;article><\/code>. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u0433\u0434\u0430, \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 <code>&lt;article><\/code>\u00a0\u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043c\u043d\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u043b\u044f \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 <code>&lt;html><\/code>\u00a0\u0438 <code>&lt;body><\/code>. \u041c\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 \u043e\u0434\u0438\u043d \u0448\u0430\u0433 \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u043f\u0440\u043e\u0449\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b article \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u0435\u0433\u043e.<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; } html, body {     margin: 0; }  article {     width: 8.5in;     height: 11in; }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u0435\u0439 \u0432 article \u044f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043d\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>margin<\/code>, \u0430 <code>padding<\/code>. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e <code>margin<\/code>\u00a0\u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u0440\u0443\u0436\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0440\u0430\u043c\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 (box model). \u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>margin<\/code>\u00a0\u0432 0.5in, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c article \u043d\u0430 7.5\u00d710, \u0447\u0442\u043e\u0431\u044b article \u043f\u043b\u044e\u0441 2\u00d7margin \u0440\u0430\u0432\u043d\u044f\u043b\u043e\u0441\u044c 8.5\u00d711. \u0410 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u0438 \u043f\u043e\u043b\u044f, \u0442\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><code>padding<\/code>\u00a0\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 article 8.5\u00d711 \u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u043c \u0432 0.5in, \u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 article \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044f\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435, \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c <code>box-sizing: border-box<\/code>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438 article \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430. \u0412\u043e\u0442 \u043c\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"css\">html {     box-sizing: border-box; } *, *:before, *:after {     box-sizing: inherit; }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043c \u0432\u0441\u0451 \u0432\u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; }  html {     box-sizing: border-box; } *, *:before, *:after {     box-sizing: inherit; }  html, body {     margin: 0; }  article {     width: 8.5in;     height: 11in;     padding: 0.5in; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/166\/a9e\/412\/166a9e412b554739d9fcaa1d7175610d.png\" width=\"941\" height=\"916\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/166\/a9e\/412\/166a9e412b554739d9fcaa1d7175610d.png\"\/><\/figure>\n<h3>\u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 article \u0438 margin \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0438 article, \u043a\u0430\u043a \u0432\u0430\u043c \u0443\u0433\u043e\u0434\u043d\u043e. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u0438\u0437\u0430\u0439\u043d \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043b\u044e\u0431\u043e\u0433\u043e HTML\/CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0430\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 flex \u0438\u043b\u0438 grid, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u0430\u043c \u0434\u0430\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043c\u0430\u0440\u043a\u0435 \u0431\u0443\u043c\u0430\u0433\u0438 \u0434\u043b\u044f \u0441\u0442\u0438\u043a\u0435\u0440\u043e\u0432. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430\u0445, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u043d\u0442\u0435\u0440 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u0431\u0443\u043c\u0430\u0433\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e \u0432\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u0432\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u043a\u0443\u0441\u043a\u043e\u043c \u0431\u0443\u043c\u0430\u0433\u0438.<\/p>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0437\u0434\u0435\u0441\u044c \u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e HTML, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u0438. \u041c\u043e\u0433\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u0434\u0435\u043b\u043e \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c \u0431\u0443\u043c\u0430\u0433\u0438, \u0430 \u043d\u0435 \u0441 \u043e\u043a\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u0438 \u0437\u0443\u043c\u0438\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0434\u043b\u0438\u043d\u0443 \u0438\u043b\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431. \u0415\u0441\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0431\u0443\u0434\u044c\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 <code>&lt;article><\/code>.<\/p>\n<h3>\u041c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/h3>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043c\u043d\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u043f\u0435\u0447\u0430\u0442\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0447\u0451\u0442-\u0444\u0430\u043a\u0442\u0443\u0440\u0443 \u0441 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 <code>&lt;table><\/code>\u00a0\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 <code>&lt;thead><\/code>\u00a0\u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<pre><code class=\"xml\">&lt;table>     &lt;thead>         &lt;tr>             &lt;th>Sample text&lt;\/th>             &lt;th>Sample text&lt;\/th>         &lt;\/tr>     &lt;\/thead>     &lt;tbody>         &lt;tr>&lt;td>0&lt;\/td>&lt;td>0&lt;\/td>&lt;\/tr>         &lt;tr>&lt;td>1&lt;\/td>&lt;td>1&lt;\/td>&lt;\/tr>         &lt;tr>&lt;td>2&lt;\/td>&lt;td>4&lt;\/td>&lt;\/tr>         ...     &lt;\/tbody> &lt;\/table><\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/618\/68c\/46e\/61868c46e60e11330a1ef26d1f00cbe7.png\" width=\"473\" height=\"270\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/618\/68c\/46e\/61868c46e60e11330a1ef26d1f00cbe7.png\"\/><\/figure>\n<p>\u042d\u0442\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442\u0435 <code>&lt;table><\/code>\u00a0\u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0443\u043a\u0440\u0430\u0448\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432, \u043d\u043e \u0432 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u0432\u0441\u0451 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0412\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0447\u0430\u0441\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u043f\u0435\u0447\u0430\u0442\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0430\u0432\u0435\u0440\u0445\u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u043d\u043e\u0441\u043a\u0443 \u0432\u043d\u0438\u0437\u0443 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0434\u043b\u0438\u043d\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u043e \u0432\u044b \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0448\u0435, \u043d\u0438\u0436\u0435 \u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Javascript, \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0445. \u0412 \u0446\u0435\u043b\u043e\u043c \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u0440\u0430\u0449\u0430\u044e\u0441\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <code>&lt;article><\/code>\u00a0\u043a\u0430\u043a \u0441 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u0438 \u0433\u043e\u0442\u043e\u0432\u043b\u044e\u0441\u044c \u043f\u0435\u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438. \u0412\u0435\u0441\u044c \u0432\u0432\u043e\u0434 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\/\u043e\u043f\u0446\u0438\u0439, \u0432\u043d\u0435 \u0432\u0441\u0435\u0445 article.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0438\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>new_page<\/code>\u00a0, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0443\u044e \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 article \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438\/\u0441\u043d\u043e\u0441\u043a\u0430\u043c\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0438\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>render_pages<\/code>, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0443\u044e article \u0438\u0437 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u044b\u0437\u044b\u0432\u0430\u044e <code>new_page<\/code>\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437. \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e article. \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>offsetTop<\/code>\u00a0, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0443\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0443\u043c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0438 \u0434\u043b\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u044e <code>render_pages<\/code>\u00a0\u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">function delete_articles() {     for (const article of Array.from(document.getElementsByTagName(\"article\")))     {         document.body.removeChild(article);     } }  function new_page() {     const article = document.createElement(\"article\");     article.innerHTML = `     &lt;header>...&lt;\/header>     &lt;table>...&lt;\/table>     &lt;footer>...&lt;\/footer>     `;     document.body.append(article);     return article; }  function render_pages() {     delete_articles();      let page = new_page();     let tbody = page.query(\"table tbody\");     for (const line_item of line_items)     {         \/\/ \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u044e \u044d\u0442\u043e \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u043d\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043c\u043e\u0436\u043d\u043e         \/\/ \u0437\u0430\u0434\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u043e\u0435.         if (tbody.offsetTop + tbody.offsetParent.offsetTop > 900)         {             page = new_page();             tbody = page.query(\"table tbody\");         }         const tr = document.createElement(\"tr\");         tbody.append(tr);         \/\/ ...     } }<\/code><\/pre>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u00ab\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 X \u0438\u0437 Y\u00bb. \u0422\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0446\u0438\u043a\u043b\u0435 for. \u0412 \u043a\u043e\u043d\u0446\u0435 \u044f \u0432\u044b\u0437\u044b\u0432\u0430\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">function renumber_pages() {     let pagenumber = 1;     const pages = document.getElementsByTagName(\"article\");     for (const page of pages)     {         page.querySelector(\".pagenumber\").innerText = pagenumber;         page.querySelector(\".totalpages\").innerText = pages.length;         pagenumber += 1;     } }<\/code><\/pre>\n<h3>\u041f\u043e\u0440\u0442\u0440\u0435\u0442\u043d\u044b\u0439\/\u0430\u043b\u044c\u0431\u043e\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c<\/h3>\n<p>\u042f \u043f\u043e\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e <a class=\"mention\" href=\"\/users\/page\">@page<\/a> \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0435\u0447\u0430\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u043e \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u0445 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0432  <a class=\"mention\" href=\"\/users\/page\">@page<\/a> \u043f\u043e\u0440\u0442\u0440\u0435\u0442\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c, \u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0430\u043b\u044c\u0431\u043e\u043c\u043d\u044b\u0439, \u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0436\u0451\u0441\u0442\u043a\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0432\u0441\u0435 \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u044d\u0442\u043e, \u0441\u043e\u0437\u0434\u0430\u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;style><\/code>\u00a0\u0434\u043b\u044f \u043f\u043e\u0440\u0442\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0438 \u0430\u043b\u044c\u0431\u043e\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044f\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Javascript. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0435\u0441\u0442\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u043d\u043e @-\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 <a class=\"mention\" href=\"\/users\/page\">@page<\/a> \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0438\u043d\u0430\u0447\u0435, \u0447\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u044f \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d. \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>render_pages<\/code>\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e.<\/p>\n<p>\u0415\u0449\u0451 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0436\u0451\u0441\u0442\u043a\u043e, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">&lt;select onchange=\"return page_orientation_onchange(event);\">     &lt;option selected>Portrait&lt;\/option>     &lt;option>Landscape&lt;\/option> &lt;\/select><\/code><\/pre>\n<pre><code class=\"css\">&lt;style id=\"style_portrait\" media=\"all\"> @page {     size: Letter portrait;     margin: 0; } article {     width: 8.5in;     height: 11in; } &lt;\/style>  &lt;style id=\"style_landscape\" media=\"not all\"> @page {     size: Letter landscape;     margin: 0; } article {     width: 11in;     height: 8.5in; } &lt;\/style><\/code><\/pre>\n<pre><code class=\"javascript\">let print_orientation = \"portrait\";  function page_orientation_onchange(event) {     print_orientation = event.target.value.toLocaleLowerCase();     if (print_orientation == \"portrait\")     {         document.getElementById(\"style_portrait\").setAttribute(\"media\", \"all\");         document.getElementById(\"style_landscape\").setAttribute(\"media\", \"not all\");     }     if (print_orientation == \"landscape\")     {         document.getElementById(\"style_landscape\").setAttribute(\"media\", \"all\");         document.getElementById(\"style_portrait\").setAttribute(\"media\", \"not all\");     }     render_printpages(); }  function render_printpages() {     if (print_orientation == \"portrait\")     {         \/\/ ...     }     else     {         \/\/ ...     } }<\/code><\/pre>\n<h3>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445<\/h3>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0430\u0440\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u044e \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b URL, \u0447\u0442\u043e\u0431\u044b Javascript \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u043b <code>const url_params = new URLSearchParams(window.location.search);<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432\u0438\u0434\u0430 <code>url_params.get(\"title\")<\/code>. \u0423 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430:<\/p>\n<ul>\n<li>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e.<\/p>\n<\/li>\n<li>\n<p>\u041b\u0435\u0433\u043a\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043c\u0435\u043d\u044f\u044f URL.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0444\u043b\u0430\u0439\u043d.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u043e \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0438 \u043c\u0438\u043d\u0443\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>URL \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u043c\u0438 \u0438 \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u044b\u043c\u0438, \u043b\u044e\u0434\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u043f\u043e \u043f\u043e\u0447\u0442\u0435. \u0421\u043c. \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u0441\u044b\u043b\u043e\u043a \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 URL \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0443\u044e \u043f\u043e\u0447\u0442\u0443, \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u00ab\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f\u00bb, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0437\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0423 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0435\u0441\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0434\u043b\u0438\u043d\u0443 URL. \u041e\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435, \u043d\u043e \u043d\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e Javascript \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 API, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b URL \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0438 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0440\u0435\u0436\u0438\u043c\u0430.<\/p>\n<p>\u0423 \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u043b\u044e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>URL \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043a\u043e\u0440\u043e\u0447\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0438 \u043c\u0438\u043d\u0443\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0436\u0434\u0430\u0442\u044c, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u0437\u0430\u0434\u0430\u044e \u0434\u043b\u044f article <code>contenteditable<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0447\u0430\u0442\u044c\u044e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044f \u043b\u044e\u0431\u043b\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0447\u0430\u0442\u044c\u044e. \u042d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u044e\u0442 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e, \u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043b\u0443\u0447\u0448\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u0438\u0441\u0445\u043e\u0434\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 article \u043a\u0430\u043a \u0441 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u043c\u0438.<\/p>\n<h3>\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e \u0441\u0430\u043c\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e\u043c\u0443<\/h3>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_cheatsheet.html\" rel=\"noopener noreferrer nofollow\">sample_cheatsheet.html<\/a><\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html> &lt;style> @page {     size: Letter portrait;     margin: 0; } html {     box-sizing: border-box; } *, *:before, *:after {     box-sizing: inherit; }  html, body {     margin: 0;     background-color: lightblue; }  header {     background-color: white;     max-width: 8.5in;     margin: 8px auto;     padding: 8px; }  article {     background-color: white;     padding: 0.5in;     width: 8.5in;     height: 11in;      \/* \u0414\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 *\/     margin: 8px auto; }  @media print {     html,     body     {         background-color: white !important;     }     body > header     {         display: none;     }     article     {         margin: 0 !important;     } } &lt;\/style>  &lt;body>     &lt;header>         &lt;p>\u0422\u0435\u043a\u0441\u0442 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0441 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u044d\u0442\u043e\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430.&lt;\/p>         &lt;p>&lt;button onclick=\"return window.print();\">Print&lt;\/button>&lt;\/p>     &lt;\/header>      &lt;article>         &lt;h1>Sample page 1&lt;\/h1>         &lt;p>sample text&lt;\/p>     &lt;\/article>      &lt;article>         &lt;h1>Sample page 2&lt;\/h1>         &lt;p>sample text&lt;\/p>     &lt;\/article> &lt;\/body> &lt;\/html><\/code><\/pre>\n<\/p>\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\/798765\/\"> https:\/\/habr.com\/ru\/articles\/798765\/<\/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<figure class=\"full-width\"><\/figure>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u043f\u0435\u0447\u0430\u0442\u0438 \u043d\u0430 HTML \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0437\u0430\u043c\u0435\u043d\u044b \u0444\u043e\u0440\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u043b\u0430 \u043e\u0442 \u0440\u0443\u043a\u0438 \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435 \u0438\u043b\u0438 \u0432 Excel. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0431-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0444\u043e\u0440\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c URL \u0438\u0437 \u043d\u0430\u0448\u0435\u0439 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043e\u0441\u043d\u043e\u0432\u044b CSS, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438, \u0438 \u0434\u0430\u043c \u043f\u0430\u0440\u0443 \u0441\u043e\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0447\u044c \u0432 \u044d\u0442\u043e\u043c.<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432<\/h3>\n<p>\u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043f\u0440\u0438\u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0434\u043b\u0438\u0432\u044b\u0435 \u0438 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c. \u041d\u043e \u043e\u043d\u0438 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0438 \u043c\u0435\u043d\u044f \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u0443\u0432\u043e\u043b\u0438\u043b\u0438.<\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_invoice.html\" rel=\"noopener noreferrer nofollow\">\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0447\u0435\u0442\u043e\u0432-\u0444\u0430\u043a\u0442\u0443\u0440<\/a><\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_sidebar.html?jobno=BRAINIACS&amp;commissioner=Minister%20McMinisterface&amp;medium=film&amp;execproducer=Golan%20%26%20Globus&amp;color=B\/W&amp;director=Peter%20Jackson&amp;length=80m&amp;funding=80%%20benefactor;%2020%%20panhandling&amp;budget=%241,234,567.00&amp;jobcontactname=Taylor%20Shift&amp;jobcontactphone=555-123-4567&amp;jobcontactemail=production@voussoir.net&amp;unioncontact=Richard%20Pryor&amp;union=TAAGSRFA&amp;synopsis=A%20group%20of%20ten%20quirky%20teenagers%20from%20opposite%20ends%20of%20town%20awaken%20one%20morning%20to%20find%20themselves%20in%20an%20unrecognizable%20world.%20All%20their%20friends%20and%20family%20are%20chasing%20them%20with%20sawed-off%20shotguns%20and%20flamethrowers.%20The%20group%20realizes%20they%20need%20to%20overcome%20their%20differences%20and%20work%20together%20if%20they%20want%20to%20have%20any%20chance%20of%20ending%20the%20human%20race%20and%20eating%20all%20the%20brains.%20Rated%20G.&amp;principlephoto=2024-06-01&amp;wrapdate=2024-06-03&amp;talent=Molly%20Ringwald%20as%20Claire%0AAngus%20Scrimm%20as%20Tiny%20Tim%0ASteve%20McQueen%20as%20Chadster%0AKeith%20David%20as%20Frank%20Armitage%0Alocal%20pigeon%20as%20The%20Great%20Destroyer%0AMichael%20Beck%20as%20Swan%0ADavid%20Cronenberg%20as%20himself&amp;payfreq=weekly&amp;otrate=1.1x&amp;dtrate=1.15x&amp;payrollcontact=shredpile@voussoir.net&amp;remarks=Please%20try%20to%20get%20Tom%20Cruise%20in%20the%20promotional%20material%20because%20we%20need%20something%20to%20draw%20crowds.&amp;signedby=voussoir&amp;signeddate=2024-02-29\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u043a\u0430 \u0441 \u0432\u0432\u043e\u0434\u043e\u043c \u0432 \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443<\/a><\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_contenteditable.html?missionnumber=ABC123&amp;victimname=Minister%20McMinisterface&amp;dob=1970-01-01&amp;occupation=Prime%20Minister%20of%20Governmentown&amp;maritalstatus=Divorced%20once%20removed&amp;language=en_CA-eh&amp;children=9&amp;issuedate=2024-02-27&amp;duedate=2024-07-04&amp;customerrequest=I%20want%20McMinisterface%20to%20experience%20a%20pranking%20the%20likes%20of%20which%20he%27s%20never%20seen%20and%20will%20never%20see%20again&amp;catalogno=GOT-UR-NOSE&amp;catalogvar=yogababe&amp;catalogsubvar=downwarddog&amp;specifics=At%20precisely%200604%20hours,%20as%20McMinisterface%20is%20heading%20out%20the%20front%20door%20of%20his%20flat%20carrying%20a%20breakfast%20scone%20and%20that%20stupid%20yellow%20coffee%20mug,%20the%20Operative%20shall%20place%20himself%20in%20front%20of%20the%20door%20of%20the%20flat,%20assuming%20the%20Downward%20Dog%20position,%20rendering%20him%20undetectable%20to%20all%20passersby.%20McMinisterface%20will%20unexpectedly%20trip%20over%20the%20firmly%20planted%20body%20of%20the%20Operative,%20landing%20on%20the%20concrete,%20breaking%20the%20cartilage%20in%20his%20nose%20and%20dropping%20that%20stupid%20yellow%20coffee%20mug.%20The%20Operative%20will%20approach%20the%20fallen%20McMinisterface%20and%20offer%20to%20help%20him%20up,%20but%20at%20the%20last%20minute%20say%20YOINK,%20GOT%20YOUR%20NOSE%20and%20run%20towards%20the%20bus%20station%20at%20the%20corner%20of%20First%20and%201st%20to%20catch%20the%200606%20bus%20for%20a%20timely%20escape.&amp;callsick=1&amp;leavephone=1&amp;scheduleddelivery=Anti-itch%20ointment,%20to%20be%20left%20on%20porch%20because%20too%20embarrassed%20to%20make%20knowing%20eye%20contact%20with%20delivery%20person&amp;leaveotherphone=1&amp;leaveotherotherphone=0&amp;soundeffects=snoring;%20groaning;%20leavemealone%20120min%20loop&amp;jointeffort=0&amp;jointopname=NA&amp;jointlocation=NA&amp;jointtime=NA&amp;leavehome=0430&amp;leavecafe=0545&amp;arrivesite=0602&amp;getaway=0606&amp;laylow=72hr%20minimum\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u043a\u0430 \u0441 contenteditable<\/a><\/p>\n<p><a href=\"https:\/\/voussoir.net\/writing\/css_for_printing\/sample_qr.html\" rel=\"noopener noreferrer nofollow\">\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 QR-\u043a\u043e\u0434\u043e\u0432<\/a><\/p>\n<h3>@page<\/h3>\n<p>\u0412 CSS \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e <code>@page<\/code>, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; }<\/code><\/pre>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0432\u044b\u0431\u0440\u0430\u043b <code>margin: 0<\/code>, \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u043e \u043d\u0438\u0436\u0435. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Letter \u0438\u043b\u0438 A4, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439 \u0441 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u043f\u043e\u043b\u0435\u0439 (margin) @page \u2014 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0448\u0438\u0440\u0438\u043d\u044b, \u0432\u044b\u0441\u043e\u0442\u044b \u0438 \u043f\u043e\u043b\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;html><\/code>\u00a0\u0438\u043b\u0438 <code>&lt;body><\/code>. @page \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 DOM \u2014 \u043e\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 DOM. \u0412 \u0432\u0435\u0431\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;html><\/code>\u00a0\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u043a\u0440\u0430\u044f\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u043e\u043d \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d @page.<\/p>\n<p>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0435 @page \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435 \u043f\u0435\u0447\u0430\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u043c\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 Ctrl+P.<\/p>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html> &lt;style> @page {     \/* \u0441\u043c. \u043d\u0438\u0436\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 *\/ } html {     width: 100%;     height: 100%;     background-color: lightblue;      \/* \u0441\u0435\u0442\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 shunryu111 https:\/\/stackoverflow.com\/a\/32861765\/5430534 *\/     background-size: 0.25in 0.25in;     background-image:     linear-gradient(to right, gray 1px, transparent 1px),     linear-gradient(to bottom, gray 1px, transparent 1px); } &lt;\/style> &lt;body>     &lt;h1>Sample text&lt;\/h1>     &lt;p>sample text&lt;\/p> &lt;\/body> &lt;\/html><\/code><\/pre>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0410 \u0432\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>:<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: Letter portrait; margin: 1in; }<\/code>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: Letter landscape; margin: 1in; }<\/code>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: Letter landscape; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 <a class=\"mention\" href=\"\/users\/page\">@page<\/a> \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u043b\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043d\u0442\u0435\u0440\u0430.\u00a0<a href=\"https:\/\/youtu.be\/3z9YjGWaxC0\" rel=\"noopener noreferrer nofollow\">\u0412\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e<\/a>.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <code>size<\/code>\u00a0A5, \u043c\u043e\u0439 \u043f\u0440\u0438\u043d\u0442\u0435\u0440 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 Letter, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 A5 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440 Letter, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043f\u043e\u043b\u0435\u0439, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u043d\u0435 \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>margin<\/code>.<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: A5 portrait; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u044f \u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043d\u0442\u0435\u0440\u0443, \u0447\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0430 A5, \u0442\u043e \u0432\u0441\u0451 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442, \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418\u0437 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e Chrome \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0443 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 Margin \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Default. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 Margin \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u0435 \u043f\u0435\u0447\u0430\u0442\u0438, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u043c \u043e\u0442 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u0443\u043c\u0430\u0433\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439.<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: A5 portrait; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0443\u043c\u0430\u0433\u0438, <code>margin<\/code>\u00a0\u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0432\u0430\u0436\u0435\u043d. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 5&#215;5 \u0431\u0435\u0437 \u043f\u043e\u043b\u0435\u0439 \u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 5&#215;5 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438. \u0420\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u00a0<code>&lt;html><\/code>\u00a0\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u043e\u0431\u0449\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c  <a class=\"mention\" href=\"\/users\/page\">@page<\/a> <strong>\u0438<\/strong>\u00a0\u043f\u043e\u043b\u0435\u0439.<\/p>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: 5in 5in; margin: 0; }<\/code>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p><code><a class=\"mention\" href=\"\/users\/page\">@page<\/a> { size: 5in 5in; margin: 1in; }<\/code>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u042f \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b \u0432\u0441\u0435 \u044d\u0442\u0438 \u0442\u0435\u0441\u0442\u044b \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443. \u0447\u0442\u043e \u0445\u043e\u0447\u0443 \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435 A5 \u0438\u043b\u0438 5&#215;5, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u043d\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0435 <a class=\"mention\" href=\"\/users\/page\">@page<\/a>. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Letter \u0441 margin 0.<\/p>\n<h3>\u041f\u0435\u0447\u0430\u0442\u044c @media<\/h3>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441<\/a>\u00a0<code>print<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0447\u0430\u0442\u0438. \u041c\u043e\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0440\u0430\u0437\u043d\u044b\u0435 \u043e\u043f\u0446\u0438\u0438 \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f; \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0435\u0447\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u044e\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>display:none<\/code>\u00a0\u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"css\">\/* \u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 *\/ header {     display: block; }  @media print {     \/* \u041f\u0440\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 *\/     header     {         display: none;     } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<figure class=\"full-width\"><\/figure>\n<h3>\u0428\u0438\u0440\u0438\u043d\u0430, \u0432\u044b\u0441\u043e\u0442\u0430, \u043f\u043e\u043b\u044f \u0438 \u043e\u0442\u0441\u0442\u0443\u043f<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u043e \u0431\u043e\u0440\u043e\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u043c \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u043d\u0443\u0436\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/The_box_model\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u043c\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/a>.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u042f \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e  <a class=\"mention\" href=\"\/users\/page\">@page<\/a>\u00a0<code>margin: 0<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0443 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u0432 \u0441\u0430\u043c\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 DOM. \u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c <a class=\"mention\" href=\"\/users\/page\">@page<\/a>\u00a0<code>margin: 0.5in<\/code>, \u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438\u0441\u044c \u0434\u0432\u043e\u0439\u043d\u044b\u0435 \u043f\u043e\u043b\u044f, \u0441\u0436\u0438\u043c\u0430\u0432\u0448\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0434\u0435\u043b\u0430\u0432\u0448\u0438\u0435 \u0435\u0433\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0433\u043e, \u0438 \u043c\u043e\u0439 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043b\u0441\u044f \u043d\u0430 \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0445\u043e\u0442\u0435\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f <a class=\"mention\" href=\"\/users\/page\">@page<\/a>, \u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0433\u0440\u0430\u043d\u0438\u0446 DOM; \u043c\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0438 \u044d\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0447\u0430\u0442\u044c\u044e. \u041c\u043d\u0435 \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e <code>&lt;html><\/code>\u00a0\u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0431\u0443\u043c\u0430\u0433\u0443, \u0430 \u043c\u043e\u0438 \u043f\u043e\u043b\u044f \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 DOM, \u0430 \u043d\u0435 \u0437\u0430 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438.<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; } html, body {     width: 8.5in;     height: 11in; }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438 \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 <code>&lt;html><\/code>\u00a0\u0438 <code>&lt;body><\/code> \u0431\u044b\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f <code>&lt;article><\/code>. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u0433\u0434\u0430, \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 <code>&lt;article><\/code>\u00a0\u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043c\u043d\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u043b\u044f \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 <code>&lt;html><\/code>\u00a0\u0438 <code>&lt;body><\/code>. \u041c\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 \u043e\u0434\u0438\u043d \u0448\u0430\u0433 \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u043f\u0440\u043e\u0449\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b article \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u0435\u0433\u043e.<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; } html, body {     margin: 0; }  article {     width: 8.5in;     height: 11in; }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u0435\u0439 \u0432 article \u044f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043d\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>margin<\/code>, \u0430 <code>padding<\/code>. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e <code>margin<\/code>\u00a0\u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u0440\u0443\u0436\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0440\u0430\u043c\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 (box model). \u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>margin<\/code>\u00a0\u0432 0.5in, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c article \u043d\u0430 7.5\u00d710, \u0447\u0442\u043e\u0431\u044b article \u043f\u043b\u044e\u0441 2\u00d7margin \u0440\u0430\u0432\u043d\u044f\u043b\u043e\u0441\u044c 8.5\u00d711. \u0410 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u0438 \u043f\u043e\u043b\u044f, \u0442\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><code>padding<\/code>\u00a0\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 article 8.5\u00d711 \u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u043c \u0432 0.5in, \u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 article \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044f\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435, \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c <code>box-sizing: border-box<\/code>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438 article \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430. \u0412\u043e\u0442 \u043c\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"css\">html {     box-sizing: border-box; } *, *:before, *:after {     box-sizing: inherit; }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043c \u0432\u0441\u0451 \u0432\u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"css\">@page {     size: Letter portrait;     margin: 0; }  html {     box-sizing: border-box; } *, *:before, *:after {     box-sizing: inherit; }  html, body {     margin: 0; }  article {     width: 8.5in;     height: 11in;     padding: 0.5in; }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<h3>\u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 article \u0438 margin \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0438 article, \u043a\u0430\u043a \u0432\u0430\u043c \u0443\u0433\u043e\u0434\u043d\u043e. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u0438\u0437\u0430\u0439\u043d \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043b\u044e\u0431\u043e\u0433\u043e HTML\/CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0430\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 flex \u0438\u043b\u0438 grid, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u0430\u043c \u0434\u0430\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043c\u0430\u0440\u043a\u0435 \u0431\u0443\u043c\u0430\u0433\u0438 \u0434\u043b\u044f \u0441\u0442\u0438\u043a\u0435\u0440\u043e\u0432. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430\u0445, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u043d\u0442\u0435\u0440 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u0431\u0443\u043c\u0430\u0433\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e \u0432\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u0432\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u043a\u0443\u0441\u043a\u043e\u043c \u0431\u0443\u043c\u0430\u0433\u0438.<\/p>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0437\u0434\u0435\u0441\u044c \u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e HTML, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u0438. \u041c\u043e\u0433\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u0434\u0435\u043b\u043e \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c \u0431\u0443\u043c\u0430\u0433\u0438, \u0430 \u043d\u0435 \u0441 \u043e\u043a\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u0438 \u0437\u0443\u043c\u0438\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0434\u043b\u0438\u043d\u0443 \u0438\u043b\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431. \u0415\u0441\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0431\u0443\u0434\u044c\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 <code>&lt;article><\/code>.<\/p>\n<h3>\u041c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/h3>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043c\u043d\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u043f\u0435\u0447\u0430\u0442\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0447\u0451\u0442-\u0444\u0430\u043a\u0442\u0443\u0440\u0443 \u0441 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 <code>&lt;table><\/code>\u00a0\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 <code>&lt;thead><\/code>\u00a0\u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<pre><code class=\"xml\">&lt;table>     &lt;thead>         &lt;tr>             &lt;th>Sample text&lt;\/th>             &lt;th>Sample text&lt;\/th>         &lt;\/tr>     &lt;\/thead>     &lt;tbody>         &lt;tr>&lt;td>0&lt;\/td>&lt;td>0&lt;\/td>&lt;\/tr>         &lt;tr>&lt;td>1&lt;\/td>&lt;td>1&lt;\/td>&lt;\/tr>         &lt;tr>&lt;td>2&lt;\/td>&lt;td>4&lt;\/td>&lt;\/tr>         ...     &lt;\/tbody> &lt;\/table><\/code><\/pre>\n<figure class=\"\"><\/figure>\n<p>\u042d\u0442\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442\u0435 <code>&lt;table><\/code>\u00a0\u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0443\u043a\u0440\u0430\u0448\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432, \u043d\u043e \u0432 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u0432\u0441\u0451 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0412\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0447\u0430\u0441\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u043f\u0435\u0447\u0430\u0442\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0430\u0432\u0435\u0440\u0445\u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u043d\u043e\u0441\u043a\u0443 \u0432\u043d\u0438\u0437\u0443 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0434\u043b\u0438\u043d\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u043e \u0432\u044b \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0448\u0435, \u043d\u0438\u0436\u0435 \u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Javascript, \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0445. \u0412 \u0446\u0435\u043b\u043e\u043c \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u0440\u0430\u0449\u0430\u044e\u0441\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <code>&lt;article><\/code>\u00a0\u043a\u0430\u043a \u0441 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u0438 \u0433\u043e\u0442\u043e\u0432\u043b\u044e\u0441\u044c \u043f\u0435\u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438. \u0412\u0435\u0441\u044c \u0432\u0432\u043e\u0434 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\/\u043e\u043f\u0446\u0438\u0439, \u0432\u043d\u0435 \u0432\u0441\u0435\u0445 article.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0438\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>new_page<\/code>\u00a0, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0443\u044e \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 article \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438\/\u0441\u043d\u043e\u0441\u043a\u0430\u043c\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0438\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>render_pages<\/code>, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0443\u044e article \u0438\u0437 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u044b\u0437\u044b\u0432\u0430\u044e <code>new_page<\/code>\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437. \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e article. \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>offsetTop<\/code>\u00a0, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0443\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0443\u043c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0438 \u0434\u043b\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u044e <code>render_pages<\/code>\u00a0\u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">function delete_articles() {     for (const article of Array.from(document.getElementsByTagName(\"article\")))     {         document.body.removeChild(article);  <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-370258","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/370258","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=370258"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/370258\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=370258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=370258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=370258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}