{"id":5564,"date":"2020-05-17T14:04:53","date_gmt":"2020-05-17T09:34:53","guid":{"rendered":"https:\/\/maktabkhooneh.org\/mag\/?p=5564"},"modified":"2026-04-06T23:03:59","modified_gmt":"2026-04-06T19:33:59","slug":"learn-how-to-style-web-pages-with-css-colors-in-css","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/learn-how-to-style-web-pages-with-css-colors-in-css\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 (\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css)"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u062a\u0627 \u0645\u0628\u0627\u062d\u062b \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0632 css \u0634\u0627\u0645\u0644 \u0631\u0646\u06af\u200c\u0647\u0627\u060c \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0648 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0648 \u0641\u0627\u0635\u0644\u0647\u200c\u0647\u0627 \u0631\u0627 \u0622\u0645\u0648\u0632\u0634 \u062f\u0647\u0645. \u0627\u0628\u062a\u062f\u0627 \u0627\u0632 <strong>\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css<\/strong> \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u0645.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u062a\u0631\u06cc\u0646 \u0648 \u067e\u0631\u06a9\u0627\u0628\u0631\u062f \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u062f\u0631 css \u0631\u0646\u06af\u200c\u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u06cc\u06a9 \u0645\u062a\u0646 \u0631\u0646\u06af \u062f\u0644\u062e\u0648\u0627\u0647\u06cc \u0631\u0627 \u0628\u062f\u0647\u06cc\u062f \u0648 \u06cc\u0627 \u0645\u0631\u0632 (border) \u0622\u0646 \u0631\u0627 \u0631\u0646\u06af \u0628\u062f\u0647\u06cc\u062f \u0648 \u06cc\u0627 \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627. \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u06af\u0641\u062a\u0647 \u0634\u062f\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc \u0645\u062e\u0635\u0648\u0635 \u0628\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u062a\u0627 \u0628\u0647 \u0622\u0646 \u0647\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u0645 \u0648\u0644\u06cc \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u0627\u0631\u062f \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0634\u0648\u06cc\u0645\u060c \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u062a\u0627 \u0628\u0627 \u0627\u0646\u0648\u0627\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0631\u0646\u06af \u062f\u0631 css \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u0645.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/front_gcZ5ulR_1403-08-16-164827889\/eb15a124ff8961e6f5a4178684ece70c.webp?expire=4893471932&#038;token=0416681717d9beb623a1202e6efcac1b&#038;md5=BBZoFxfZvrYjoSAubvysGw==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f9\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f4\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f4\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0627\u0646\u0648\u0627\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0631\u0646\u06af \u0647\u0627 \u062f\u0631 css<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0631\u0646\u06af \u062f\u0631 css \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0646\u0627\u0645 \u0631\u0646\u06af \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627 \u0641\u0631\u0645\u062a\u200c\u0647\u0627\u06cc rgb\u060c hex\u060c HSLA\u060c RGBA\u060c HSL \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0631\u0646\u06af \u062d\u062f\u0648\u062f \u06f1\u06f4\u06f0 \u0646\u0648\u0639 \u0631\u0646\u06af \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0634\u0627\u06cc\u062f \u062f\u0631 \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u062e\u0627\u0635 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u067e\u0627\u0633\u062e \u0646\u06cc\u0627\u0632\u062a\u0627\u0646 \u0628\u0627\u0634\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0631\u0646\u06af \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;body&gt;\n\n\n\n\n&lt;h1 style=\"background-color:Tomato;\"&gt;Tomato&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:Orange;\"&gt;Orange&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:DodgerBlue;\"&gt;DodgerBlue&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:MediumSeaGreen;\"&gt;MediumSeaGreen&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:Gray;\"&gt;Gray&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:SlateBlue;\"&gt;SlateBlue&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:Violet;\"&gt;Violet&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:LightGray;\"&gt;LightGray&lt;\/h1&gt;\n\n\n\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0627\u0645\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646\u200c\u0647\u0627\u06cc\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0631\u0646\u06af\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0633\u0627\u0644\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0641\u0631\u0645\u062a rbg \u0648 \u06cc\u0627 hex \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0641\u0631\u0645\u062a rgba \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0631\u0646\u06af\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0631\u0635\u062f \u0634\u0641\u0627\u0641\u06cc\u062a (opacity) \u0646\u06cc\u0632 \u0628\u062f\u0647\u06cc\u062f. \u0627\u0646\u0648\u0627\u0639 \u0641\u0631\u0645\u062a \u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;h1 style=\"background-color:rgb(255, 99, 71);\"&gt;...&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#ff6347;\"&gt;...&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:hsl(9, 100%, 64%);\"&gt;...&lt;\/h1&gt;\n\n\n\n&lt;h1 style=\"background-color:rgba(255, 99, 71, 0.5);\"&gt;...&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:hsla(9, 100%, 64%, 0.5);\"&gt;...&lt;\/h1&gt;<\/span><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0641\u0631\u0645\u062a RBG \u0648 RGBA \u0648 HEX<\/span><\/h4>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0641\u0631\u0645\u062a RBG \u0648 RGBA \u0648 HEX \u06a9\u0627\u0631\u0628\u0631\u062f \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 \u0633\u0627\u06cc\u0631 \u0641\u0631\u0645\u062a\u200c\u0647\u0627 \u062f\u0631 css \u062f\u0627\u0631\u0646\u062f. \u0627\u06cc\u0646 \u0641\u0631\u0645\u062a\u200c\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc\u200c\u0628\u0627\u0634\u0646\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">RBG (Red, Blue, Green)\n\nRBGA (Red, Blue, Green, Alpha)\n\nHEX #rrggbb<\/span><\/pre>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0628\u0647 \u062c\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u06a9\u0644\u0645\u0627\u062a \u0628\u0627\u0644\u0627\u060c \u0645\u0642\u062f\u0627\u0631 \u0639\u062f\u062f\u06cc \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u0627\u06cc\u0646 \u0639\u062f\u062f \u0628\u06cc\u0646 \u06f0 \u062a\u0627 \u06f2\u06f5\u06f5 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u062a\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc Alpha \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0634\u0641\u0627\u0641\u06cc\u062a \u0631\u0646\u06af \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0627\u0632 \u06f0 \u062a\u0627 \u06f1 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u06a9\u0647 \u0639\u062f\u062f \u06f0 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0639\u062f\u0645 \u0634\u0641\u0627\u0641\u06cc\u062a \u0648 \u0645\u0648\u062c\u0628 \u0628\u06cc \u0631\u0646\u06af \u0634\u062f\u0646 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0639\u062f\u062f \u06f1 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u0627\u0645\u0644 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u062a\u0641\u0627\u0648\u062a \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u062f\u0631 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;h1 style=\"background-color:rgb(0, 0, 0);\"&gt;rgb(0, 0, 0)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgb(60, 60, 60);\"&gt;rgb(60, 60, 60)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgb(120, 120, 120);\"&gt;rgb(120, 120, 120)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgb(180, 180, 180);\"&gt;rgb(180, 180, 180)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgb(240, 240, 240);\"&gt;rgb(240, 240, 240)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgb(255, 255, 255);\"&gt;rgb(255, 255, 255)&lt;\/h1&gt;\n\n\u062f\u0631 \u062d\u0627\u0644\u062a \u067e\u0627\u06cc\u06cc\u0646 \u0646\u06cc\u0632\u060c \u0641\u0631\u0645\u062a rgba \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a.\n\n&lt;h1 style=\"background-color:rgba(255, 99, 71, 0);\"&gt;rgba(255, 99, 71, 0)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgba(255, 99, 71, 0.2);\"&gt;rgba(255, 99, 71, 0.2)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgba(255, 99, 71, 0.4);\"&gt;rgba(255, 99, 71, 0.4)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgba(255, 99, 71, 0.6);\"&gt;rgba(255, 99, 71, 0.6)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgba(255, 99, 71, 0.8);\"&gt;rgba(255, 99, 71, 0.8)&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:rgba(255, 99, 71, 1);\"&gt;rgba(255, 99, 71, 1)&lt;\/h1&gt;<\/span><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0641\u0631\u0645\u062a Hex<\/span><\/h5>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0641\u0631\u0645\u062a Hex \u0646\u06cc\u0632 \u06cc\u06a9\u06cc \u0627\u0632 \u0641\u0631\u0645\u062a\u200c\u0647\u0627\u06cc \u067e\u0631\u06a9\u0627\u0628\u0631\u062f \u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0641\u0631\u0645\u062a \u06a9\u0647 \u0645\u0642\u0627\u062f\u0631 \u0647\u06af\u0632\u0627 \u062f\u0633\u06cc\u0645\u0627\u0644 (hexadecimal) \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u062f\u0631 \u0641\u0631\u0645\u062a \u062f\u0633\u06cc\u0645\u0627\u0644 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u0648 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 \u06f0\u06f0 \u062a\u0627 ff \u0628\u0631\u0627\u06cc \u0647\u0631 \u0642\u0633\u0645\u062a rr\u060c gg \u0648 bb \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0627\u0646\u0648\u0627\u0639 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u0645\u062a hex \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;h1 style=\"background-color:#ff0000;\"&gt;#ff0000&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#0000ff;\"&gt;#0000ff&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#3cb371;\"&gt;#3cb371&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#ee82ee;\"&gt;#ee82ee&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#ffa500;\"&gt;#ffa500&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#6a5acd;\"&gt;#6a5acd&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#000000;\"&gt;#000000&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#3c3c3c;\"&gt;#3c3c3c&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#787878;\"&gt;#787878&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#b4b4b4;\"&gt;#b4b4b4&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#f0f0f0;\"&gt;#f0f0f0&lt;\/h1&gt;\n\n&lt;h1 style=\"background-color:#ffffff;\"&gt;#ffffff&lt;\/h1&gt;<\/span><\/pre>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0646\u06af\u200c\u0647\u0627 \u062f\u0631 \u0641\u0631\u0645\u062a hex \u0648 \u06cc\u0627 rgb \u0646\u06cc\u0627\u0632\u06cc \u0646\u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u06a9\u0647 \u062d\u062a\u0645\u0627 \u06a9\u062f \u0631\u0646\u06af\u200c\u0647\u0627 \u0631\u0627 \u062d\u0641\u0638 \u0628\u0627\u0634\u06cc\u062f. \u0627\u0644\u0628\u062a\u0647 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u0645\u0631\u0633\u0648\u0645 \u062a\u0631 \u0645\u062b\u0644 \u0633\u0641\u06cc\u062f\u060c \u0633\u06cc\u0627\u0647\u060c \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc\u060c \u0642\u0631\u0645\u0632 \u0648 \u06a9\u0644\u0627 \u0631\u0646\u06af\u0627\u06cc \u0627\u0635\u0644\u06cc \u0631\u0627 \u0628\u062f\u0627\u0646\u06cc\u062f \u0648\u0644\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u06cc\u0631 \u0631\u0646\u06af\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062c\u0633\u062a \u0648 \u062c\u0648 \u062f\u0631 \u06af\u0648\u06af\u0644 \u0648 \u062a\u0627\u06cc\u067e rbg to hex\u060c \u0627\u0632 \u062a\u0628\u062f\u06cc\u0644 \u0631\u0646\u06af \u06af\u0648\u06af\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0628\u0632\u0627\u0631\u06cc \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0648 \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">&#8221; \u062f\u0631 \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u062f\u0631 \u0641\u0631\u0645\u062a hex \u0627\u0633\u0645 \u0631\u0646\u06af \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u062d\u0631\u0648\u0641 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f\u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0631\u0646\u06af \u0633\u0641\u06cc\u062f \u0628\u0627 \u06a9\u062f #ffffff \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0644\u0627\u0635\u0647 \u0648 \u0628\u0647 \u0635\u0648\u0631\u062a #fff \u0646\u06cc\u0632 \u0622\u0646 \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.&#8221;<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><style><\/style><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-300x169.jpg.webp\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644\" srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-300x169.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-1024x576.jpg.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-768x432.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/html-elements.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-html-in-simple-language-first-part\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"font-size: 16px;\">\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0628\u0627 \u0627\u0646\u0648\u0627\u0639 \u0641\u0631\u0645\u062a \u062a\u0639\u0631\u06cc\u0641 \u0631\u0646\u06af \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 <strong>\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css<\/strong> \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u0645.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">\u062f\u0631 css \u0633\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0635\u0644\u06cc color\u060c background-color \u0648 border-color \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0627\u06cc\u0646 \u0633\u0647 \u0646\u0648\u0639 \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f \u0631\u0627 \u062f\u0631 css \u0648 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u0631\u0646\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062a\u06af \u0631\u0646\u06af \u062f\u0627\u062f\u06cc\u0645 \u0648 \u0633\u067e\u0633 \u0628\u0647 \u0645\u062a\u0646 \u0622\u0646 \u0648 \u0633\u067e\u0633 \u0628\u0647 \u0645\u0631\u0632 (border) \u0622\u0646. \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0633\u0627\u062f\u06af\u06cc \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0631\u0646\u06af \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u062a\u06af \u062f\u0631 html \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n\n\n\n&lt;head&gt;\n\n&nbsp; &lt;style&gt;\n\n&nbsp;&nbsp;&nbsp; h1 {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color:Tomato;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color:blue;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: green;\n\n&nbsp;&nbsp;&nbsp; }\n\n&nbsp; &lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n\n\n\n&lt;h1 &gt;Tomato&lt;\/h1&gt;\n\n\n\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062f\u0631 css<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0627\u06af\u0631 \u0628\u0627 html \u0622\u0634\u0646\u0627\u06cc\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u062d\u062a\u0645\u0627 \u0645\u06cc\u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0639\u06a9\u0633 \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062a\u06af img \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0627\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0634\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u062f\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u06cc\u06a9 \u062a\u06af \u0645\u062b\u0644\u0627 \u062a\u06af div \u0639\u06a9\u0633 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0633\u0627\u0644\u0647 \u062f\u0631 css \u0648\u06cc\u0698\u06af\u06cc\u200c\u0627\u06cc \u062a\u062d\u062a \u0639\u0646\u0648\u0627\u0646 background \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0639\u06a9\u0633 \u0648\u06cc\u0627 \u06cc\u06a9 \u0631\u0646\u06af \u0631\u0627 \u0628\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u06cc\u06a9 \u062a\u06af \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062f\u0644\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0628\u0647 \u0622\u0646\u200c\u0647\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u0645.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"172\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/05\/learn-how-to-style-web-pages-with-css-300x172.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0635\u0641\u0631\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/05\/learn-how-to-style-web-pages-with-css-300x172.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/05\/learn-how-to-style-web-pages-with-css-768x441.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/learn-how-to-style-web-pages-with-css.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/172;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-how-to-style-web-pages-with-css\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0635\u0641\u0631<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc background-color \u0631\u0627 \u062f\u0631 <strong>\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css<\/strong> \u06a9\u0647 \u0622\u0634\u0646\u0627 \u0634\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc background-image \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u06a9\u0647 \u0646\u0642\u0634 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0639\u06a9\u0633 \u062f\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u06cc\u06a9 \u062a\u06af \u0631\u0627 \u062f\u0631 css \u062f\u0627\u0631\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0635\u0641\u062d\u0647 ( \u062a\u06af body) \u06cc\u06a9 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0627\u0632 \u0646\u0648\u0639 \u0639\u06a9\u0633 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0646\u06cc\u0632 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 url \u0648 \u06cc\u06a9 \u0622\u062f\u0631\u0633 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 url \u0645\u06cc \u0628\u0627\u0634\u062f. \u0622\u062f\u0631\u0633 \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u0622\u062f\u0631\u0633 \u0639\u06a9\u0633\u06cc \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062f\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0622\u062f\u0631\u0633 \u062d\u062a\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u06cc\u0646 &#8220;&#8221; \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp; &lt;head&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image: url(\"paper.gif\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n&nbsp;&nbsp;&nbsp; &lt;\/style&gt;\n\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;h1&gt;Hello World!&lt;\/h1&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;This page has an image as the background!&lt;\/p&gt;\n\n&nbsp; &lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc background-repeat<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc\u060c background-repeat \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f. \u0645\u062b\u0644\u0627 \u0634\u0645\u0627 \u06cc\u06a9 \u0639\u06a9\u0633 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u0627\u06cc\u0646 \u0639\u06a9\u0633 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0627\u067e\u06cc \u062f\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062a\u06a9\u0631\u0627\u0631 \u0634\u0648\u062f\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc background-repeat \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0631\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0646\u06cc\u0632 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u062a\u06a9\u0631\u0627\u0631 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 x \u0635\u0648\u0631\u062a \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp; &lt;head&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image: url(\"gradient_bg.png\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat: repeat-x;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n&nbsp;&nbsp;&nbsp; &lt;\/style&gt;\n\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;h1&gt;Hello World!&lt;\/h1&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;Here, a background image is repeated only horizontally!&lt;\/p&gt;\n\n&nbsp; &lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641 \u0632\u06cc\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 16px;\">repeat-x: \u062a\u06a9\u0631\u0627\u0631 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">repeat-y: \u062a\u06a9\u0631\u0627\u0631 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">repeat: \u062a\u06a9\u0631\u0627\u0631 \u062f\u0631 \u0647\u0631 \u062f\u0648 \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u0648 \u0639\u0645\u0648\u062f\u06cc<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">no-repeat: \u0647\u06cc\u0686 \u062a\u06a9\u0631\u0627\u0631\u06cc \u0635\u0648\u0631\u062a \u0646\u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u062f\u0631 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc background-position<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc\u060c background-position \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062d\u0644 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. (\u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0639\u06a9\u0633 \u0628\u0627\u0634\u062f\u060c \u0645\u062d\u0644 \u0639\u06a9\u0633 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0631\u0646\u06af \u0628\u0627\u0634\u062f\u060c \u0641\u0636\u0627\u06cc\u06cc \u06a9\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0646\u06af \u062f\u0627\u0631\u062f \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.)<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp; &lt;head&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image: url(\"img_tree.png\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat: no-repeat;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-position: left top;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n&nbsp;&nbsp;&nbsp; &lt;\/style&gt;\n\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;h1&gt;The background-attachment Property&lt;\/h1&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The background-attachment property specifies whether the background image\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; should scroll or be fixed (will not scroll with the rest of the page).\n\n&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;Tip:&lt;\/strong&gt; If you do not see any scrollbars, try to resize the\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; browser window.\n\n&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n&nbsp; &lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0627\u0644\u0627 (top) \u0648 \u067e\u0627\u06cc\u06cc\u0646 (bottom) \u0628\u0648\u062f\u0646 \u0622\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631 \u0686\u067e (left) \u06cc\u0627 \u0631\u0627\u0633\u062a (right) \u0628\u0648\u062f\u0646 \u0622\u0646 \u0631\u0627. \u062a\u0641\u0627\u0648\u062a\u06cc \u0646\u062f\u0627\u0631\u062f \u06a9\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0627\u06cc\u0646 \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u0628\u0647 \u0686\u0647 \u0635\u0648\u0631\u062a \u0627\u0633\u062a. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u0628\u062f\u0647\u06cc\u062f \u0648 \u0645\u0642\u062f\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u062f\u0631 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0645\u062d\u0644 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0627\u0644\u0627 \u0633\u0645\u062a \u0686\u067e \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"150\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-300x150.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u062f\u0648\u0645\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-300x150.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-768x384.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/html-hpg-featured-new.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/150;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learning-basic-html\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u062f\u0648\u0645<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc background-attachment<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc background-attachment \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f\u060c \u0639\u06a9\u0633 \u06cc\u0627 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0633\u06a9\u0631\u0648\u0644 \u062c\u0627\u0628\u0647 \u062c\u0627 \u0634\u0648\u062f \u06cc\u0627 \u0646\u0647. <\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 fixed \u0648 scroll \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644\u062a fixed \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0628\u0627 \u0627\u0633\u06a9\u0631\u0648\u0644\u060c \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0646\u06cc\u0632 \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f (\u062d\u0631\u06a9\u062a \u06a9\u0631\u062f\u0646 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06a9\u0627\u0646 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0646\u06cc\u0633\u062a\u060c\u062f\u0631 \u0648\u0627\u0642\u0639 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0633\u0645 \u0645\u0642\u062f\u0627\u0631 \u0645\u0634\u062e\u0635 \u0627\u0633\u062a\u060c \u062f\u0631 \u0645\u06a9\u0627\u0646 \u062e\u0648\u062f \u062b\u0627\u0628\u062a \u0645\u06cc\u200c\u0645\u0627\u0646\u062f \u0648 \u0647\u0645\u06cc\u0646 \u0627\u0645\u0631 \u0645\u0648\u062c\u0628 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0686\u0648\u0646 \u0645\u06a9\u0627\u0646 \u0622\u0646 \u062b\u0627\u0628\u062a \u0627\u0633\u062a\u060c \u0647\u0645\u0648\u0627\u0631\u0647 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0633\u062a \u0628\u0627\u0642\u06cc \u0628\u0645\u0627\u0646\u062f \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.) \u0648 \u062f\u0631 \u062d\u0627\u0644\u062a scroll \u06a9\u0647 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0622\u0646 \u0646\u06cc\u0632 \u0627\u0633\u062a\u060c \u062f\u0631 \u0632\u0645\u0627\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644\u060c \u062d\u0631\u06a9\u062a \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06af\u0631 \u0642\u0633\u0645\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp; &lt;head&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image: url(\"img_tree.png\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat: no-repeat;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-attachment: fixed;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n&nbsp;&nbsp;&nbsp; &lt;\/style&gt;\n\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;h1&gt;The background-attachment Property&lt;\/h1&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The background-attachment property specifies whether the background image\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; should scroll or be fixed (will not scroll with the rest of the page).\n\n&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;\/p&gt;\n\n&nbsp; &lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc background-origin<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u0645\u0648\u0631\u062f \u0628\u0631\u0631\u0633\u06cc background-origin \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u0642\u0637\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0646\u0633\u0628\u062a \u0628\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u062c\u0627\u0628\u0647 \u062c\u0627 \u06a9\u0646\u06cc\u062f \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0633\u0647 \u062d\u0627\u0644\u062a \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"169\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-300x169.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0633\u0648\u0645\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-300x169.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-768x432.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/000-Semantic-HTML.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/169;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/free-html-training\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0633\u0648\u0645<\/a>\n<\/section><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 16px;\">padding-box: \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u0648 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0636\u0627\u06cc\u06cc \u06a9\u0647 padding \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 padding \u062c\u0644\u0648\u062a\u0631 \u0635\u062d\u0628\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">content-box: \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0636\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0631\u0648\u0646 \u062a\u06af \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">border-box: \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0636\u0627\u06cc \u0645\u0631\u0632 \u062a\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">inherit: \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u06a9\u0647 \u062a\u0642\u0631\u06cc\u0628\u0627 \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc css \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u067e\u062f\u0631 \u062e\u0648\u062f \u0628\u0647 \u0627\u0631\u062b \u0645\u06cc\u200c\u0628\u0631\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">Initial: \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0646\u06cc\u0632 \u062a\u0642\u0631\u06cc\u0628\u0627 \u062f\u0631 \u062a\u0645\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc css \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0627\u062e\u062a\u0635\u0627\u0635 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u0627 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u06f0\u060c\u06f0 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u06a9\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u06cc\u0631\u0648\u0646\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0642\u0633\u0645\u062a \u062a\u06af (\u0647\u0645\u0627\u0646\u0646\u062f border-box).<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0646\u0642\u0637\u0647 origin \u0628\u0631\u0627\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647\u060c \u06af\u0648\u0634\u0647 \u0633\u0645\u062a \u0686\u067e \u0628\u0627\u0644\u0627\u06cc \u0641\u0636\u0627\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp; &lt;head&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #example1 {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 10px dashed black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 25px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: url(paper.gif);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat: no-repeat;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-origin: padding-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n\n\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #example2 {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 10px dashed black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 25px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: url(paper.gif);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat: no-repeat;\n\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-origin: border-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n\n\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #example3 {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 10px dashed black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 25px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: url(paper.gif);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat: no-repeat;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-origin: content-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n&nbsp;&nbsp;&nbsp; &lt;\/style&gt;\n\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;h2&gt;background-origin: padding-box (default):&lt;\/h2&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;div id=\"example1\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;Hello World&lt;\/h2&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The background image starts from the upper left corner of the padding\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; edge.\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;h2&gt;background-origin: border-box:&lt;\/h2&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;div id=\"example2\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;Hello World&lt;\/h2&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The background image starts from the upper left corner of the border.\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;h2&gt;background-origin: content-box:&lt;\/h2&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;div id=\"example3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;Hello World&lt;\/h2&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The background image starts from the upper left corner of the content.\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n&nbsp; &lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc background-clip<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc background-clip \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062f\u0631 \u06cc\u06a9 \u062a\u06af\u060c \u062a\u0627 \u06a9\u062c\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0627\u062f\u0627\u0645\u0647 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f. \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u060c \u0645\u0634\u0627\u0628\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc background-origin \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 16px;\">padding-box: \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u0648 \u062a\u0627 \u0641\u0636\u0627\u06cc\u06cc \u06a9\u0647 padding \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f \u0627\u062f\u0627\u0645\u0647 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">content-box: \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0641\u0636\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0631\u0648\u0646 \u062a\u06af \u0627\u062f\u0627\u0645\u0647 \u067e\u06cc\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 16px;\">border-box: \u062a\u0627 \u0645\u0631\u0632 \u062a\u06af \u0627\u062f\u0627\u0645\u0647 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-size: 16px;\">\u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0646\u06cc\u0632 \u0647\u0645\u0627\u0646\u0646\u062f background-origin \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp; &lt;head&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #example1 {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 10px dotted black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 15px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: lightblue;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-clip: border-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n\n\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #example2 {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 10px dotted black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 15px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: lightblue;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-clip: padding-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n\n\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #example3 {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 10px dotted black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 15px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;background: lightblue;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-clip: content-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n\n&nbsp;&nbsp;&nbsp; &lt;\/style&gt;\n\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;h1&gt;The background-clip Property&lt;\/h1&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The background-clip property defines how far the background should extend\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; within an element.\n\n&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;background-clip: border-box (this is default):&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;div id=\"example1\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;The background extends behind the border.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;background-clip: padding-box:&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;div id=\"example2\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;The background extends to the inside edge of the border.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;background-clip: content-box:&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;div id=\"example3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;The background extends to the edge of the content box.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\n\n\n&nbsp;&nbsp;&nbsp; &lt;p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;Note:&lt;\/strong&gt; The background-clip property is not supported in\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Internet Explorer 8 and earlier versions.\n\n&nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n\n&nbsp; &lt;\/body&gt;\n\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc background-size \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u0631 \u0631\u0648\u06cc auto \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u0639\u06a9\u0633 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648 \u06cc\u0627 \u0641\u0636\u0627\u06cc \u062a\u06af \u06a9\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u06cc \u0628\u0627\u0634\u062f. <\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">\u0627\u0639\u062f\u0627\u062f \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0628\u0631\u0627\u06cc \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u06cc\u200c\u0628\u0627\u0634\u0646\u062f. px \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0648\u0627\u062d\u062f \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u06cc \u0628\u0634\u0627\u062f \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0628\u0637\u0647 \u062c\u0644\u0648\u062a\u0631 \u0635\u062d\u0628\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      #example1 {\n        border: 2px solid black;\n        padding: 25px;\n        background: url(mountain.jpg);\n        background-repeat: no-repeat;\n        background-size: auto;\n      }\n\n      #example2 {\n        border: 2px solid black;\n        padding: 25px;\n        background: url(mountain.jpg);\n        background-repeat: no-repeat;\n        background-size: 300px 100px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;background-size: auto (default):&lt;\/h2&gt;\n    &lt;div id=\"example1\"&gt;\n      &lt;h2&gt;Hello World&lt;\/h2&gt;\n      &lt;p&gt;The background image is displayed in its original size.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;h2&gt;background-size: 300px 100px:&lt;\/h2&gt;\n    &lt;div id=\"example2\"&gt;\n      &lt;h2&gt;Hello World&lt;\/h2&gt;\n      &lt;p&gt;Here, the background image is set to 300px wide and 100px high.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;strong&gt;Note:&lt;\/strong&gt; The background-size property is not supported in\n      Internet Explorer 8 and earlier versions.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0622\u062e\u0631 \u0647\u0645 \u0642\u0627\u0628\u0644\u06cc\u062a \u062e\u0644\u0627\u0635\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0628\u06af\u0648\u06cc\u0645. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0686\u0646\u062f\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f\u060c \u062f\u0631 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0645\u0627\u0645\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0635\u0637\u0644\u0627\u062d\u0627 shortened \u0645\u06cc\u200c\u06af\u0648\u06cc\u0646\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0634\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0628\u0647 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0628\u062f\u0647\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  background-color: #ffffff;\n  background-image: url(\"img_tree.png\");\n  background-repeat: no-repeat;\n  background-position: right top;\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0645\u0627\u0645\u06cc \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u06a9\u0647 \u062e\u0648\u062f \u0628\u0627\u0639\u062b \u0628\u0627\u0644\u0627 \u0631\u0641\u062a\u0646 \u062d\u062c\u0645 \u06a9\u062f \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0644\u0627\u0635\u0647 \u0648 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  background: #ffffff url(\"img_tree.png\") no-repeat right top;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\"> \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06cc\u06a9 \u062a\u06af \u062f\u0631 css <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0631\u062a\u06cc\u0628 \u0646\u0648\u0634\u062a\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0645\u0647\u0645 \u0627\u0633\u062a \u0648 \u062d\u062a\u0645\u0627 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628\u06cc \u06a9\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f (\u0645\u0634\u0627\u0628\u0647 \u0628\u0627\u0644\u0627) \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f. \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u062e\u0634 \u0628\u0639\u062f\u06cc \u0645\u0648\u0631\u062f \u0628\u0631\u0631\u0633\u06cc \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06cc\u06a9 \u062a\u06af \u062f\u0631 css \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06cc\u06a9 \u062a\u06af \u0634\u0627\u0645\u0644 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0632\u06cc\u0631 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"281\" height=\"204\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/1.png\" alt=\"\" class=\"wp-image-5474 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 281px; --smush-placeholder-aspect-ratio: 281\/204;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0631\u0646\u06af \u0622\u0628\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u06cc\u06a9 \u062a\u06af \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0634\u0645\u0627 \u0641\u0636\u0627\u06cc \u0627\u06cc\u0646 \u0645\u062d\u06cc\u0637 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0631\u0646\u06af \u0633\u0628\u0632 \u0641\u0627\u0635\u0644\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u062a\u0627 \u0645\u0631\u0632 \u06cc\u06a9 \u062a\u06af \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. (padding)<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0631\u0646\u06af \u0632\u0631\u062f \u0645\u0631\u0632 \u06cc\u06a9 \u062a\u06af \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0631\u0632 \u0634\u0645\u0627 \u062f\u0627\u062e\u0644 \u0648 \u0628\u06cc\u0631\u0648\u0646 \u06cc\u06a9 \u062a\u06af \u0631\u0627 \u0627\u0632 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062c\u062f\u0627 \u06a9\u0646\u06cc\u062f. (border)<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0631\u0646\u06af \u0646\u0627\u0631\u0646\u062c\u06cc \u0646\u06cc\u0632 \u0641\u0627\u0635\u0644\u0647 \u06cc\u06a9 \u062a\u06af \u0628\u0627 \u0627\u0637\u0631\u0627\u0641 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. (margin)<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0647\u0631 \u062a\u06af\u06cc \u062f\u0631 html \u062f\u0627\u0631\u0627\u06cc \u062a\u0645\u0627\u0645\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u200c \u0630\u06a9\u0631 \u0634\u062f\u0647 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0645\u0627\u0645\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0631\u0627 \u06cc\u06a9\u062c\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        background-color: lightgrey;\n        width: 300px;\n        border: 15px solid green;\n        padding: 50px;\n        margin: 20px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Demonstrating the Box Model&lt;\/h2&gt;\n\n    &lt;p&gt;\n      The CSS box model is essentially a box that wraps around every HTML\n      element. It consists of: borders, padding, margins, and the actual\n      content.\n    &lt;\/p&gt;\n\n    &lt;div&gt;\n      This text is the content of the box. We have added a 50px padding, 20px\n      margin and a 15px green border. Ut enim ad minim veniam, quis nostrud\n      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis\n      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\n      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n      sunt in culpa qui officia deserunt mollit anim id est laborum.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062a\u0639\u0631\u06cc\u0641 padding<\/span><\/h4>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0647\u0631 \u06a9\u062f\u0648\u0645 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0628\u0647 \u062a\u0648\u0636\u06cc\u062d \u0622\u0646\u200c\u0647\u0627 \u062e\u0648\u0627\u0647\u0645 \u067e\u0631\u062f\u0627\u062e\u062a. \u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0631\u0627\u06cc \u0641\u0627\u0635\u0644\u0647\u200c\u0647\u0627 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627 \u0627\u0632 \u0648\u0627\u062d\u062f \u0628\u0633\u06cc\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0627\u0631\u062f\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u0627\u0646\u0648\u0627\u0639 \u0648\u0627\u062d\u062f\u0647\u0627 \u062f\u0631 css \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u0645 \u0648 \u0633\u067e\u0633 \u0628\u0647 \u062a\u0639\u0631\u06cc\u0641 padding \u0648 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0637\u0631\u062d \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0628\u0627\u06a9\u0633 \u06cc\u06a9 \u062a\u06af \u062e\u0648\u0627\u0647\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0648\u0627\u062d\u062f<\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u0632 \u0648\u0627\u062d\u062f\u200c\u0647\u0627 \u062f\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 css \u0627\u0632 \u062c\u0645\u0644\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0633\u0627\u06cc\u0632 \u0645\u062a\u0646\u060c margin\u060c padding\u060c \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0648 \u0645\u0648\u0627\u0631\u062f\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0648\u0627\u062d\u062f\u0647\u0627 \u062f\u0631 css \u0628\u0647 \u062f\u0648 \u0646\u0648\u0639 \u0648\u0627\u062d\u062f\u200c\u0647\u0627\u06cc \u0645\u0637\u0644\u0642 \u0648 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\"><strong><span style=\"color: #000000;\">\u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0645\u0637\u0644\u0642&nbsp;<\/span><\/strong><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u0627\u062d\u062f\u200c\u0647\u0627\u06cc \u0645\u0637\u0644\u0642 \u0645\u0642\u062f\u0627\u0631 \u062b\u0627\u0628\u062a \u0648 \u0645\u0634\u062e\u0635\u06cc \u062f\u0627\u0631\u0646\u062f \u0648 \u062f\u0631 \u0627\u0628\u0639\u0627\u062f \u0648 \u0633\u0627\u06cc\u0632\u0647\u0627 \u0648 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0639\u0631\u0636 \u0635\u0641\u062d\u0647\u060c \u062a\u063a\u06cc\u06cc\u0631\u06cc \u062f\u0631 \u0622\u0646\u200c\u0647\u0627 \u0628\u0647 \u0648\u062c\u0648\u062f \u0646\u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u062a\u0648\u0636\u06cc\u062d<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u0627\u062d\u062f<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0633\u0627\u0646\u062a\u06cc \u0645\u062a\u0631<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">cm<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0645\u06cc\u0644\u06cc \u0645\u062a\u0631<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">mm<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646\u0686 ( \u06f1 \u0627\u06cc\u0646\u0686 = 96 \u067e\u06cc\u06a9\u0633\u0644 (px) = 2.54 \u0633\u0627\u0646\u062a\u06cc \u0645\u062a\u0631)<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">in<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u067e\u06cc\u06a9\u0633\u0644 \u2013 \u0627\u06cc\u0646 \u0648\u0627\u062d\u062f \u0628\u0627 \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u06a9 \u0648\u0627\u062d\u062f \u0645\u0637\u0644\u0642 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u067e\u06cc\u06a9\u0633\u0644\u200c\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u062f\u0633\u062a\u06af\u0627\u0647 \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">px *<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0642\u0637\u0647 (\u06f1 \u0646\u0642\u0637\u0647 = 72\/\u06f1 \u0627\u0632 \u06f1 \u0627\u06cc\u0646\u0686)<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">pt<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u067e\u06cc\u06a9\u0627\u0633 (\u06f1 \u067e\u06cc\u06a9\u0627\u0633 = 12 pt)<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">pc<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">&#8221; \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f \u0645\u0637\u0644\u0642\u060c \u0639\u0645\u062f\u062a\u0627 \u0627\u0632 \u0648\u0627\u062d\u062f \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. &#8220;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646 \u0648\u0627\u062d\u062f\u0647\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0637\u0648\u0644 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u062a\u0648\u0636\u06cc\u062d<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u0627\u062d\u062f<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">em<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u0627\u0631\u062a\u0641\u0627\u0639 \u0641\u0648\u0646\u062a \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. (\u0628\u06cc\u0634\u062a\u0631 em \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.)<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">ex<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u0639\u0631\u0636 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u06f0 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">ch<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u062f\u0631 \u0627\u0644\u0645\u0627\u0646 \u0631\u0634\u062a\u0647 (\u0645\u0631\u0648\u0631\u06af\u0631) \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">rem<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u06f1% \u0639\u0631\u0636 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. (\u0627\u0632 \u062c\u0645\u0644\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648)<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">vw<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u06f1% \u0637\u0648\u0644 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. (\u0627\u0632 \u062c\u0645\u0644\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648)<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">vh<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u06f1% \u06a9\u0648\u0686\u06a9\u062a\u0631\u06cc\u0646 \u0628\u0639\u062f \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">vmin<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u06f1% \u0628\u0632\u0631\u06af\u062a\u0631\u06cc\u0646 \u0628\u0639\u062f \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">vmax<\/span><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u0633\u0628\u062a \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u067e\u062f\u0631\u0634 \u0633\u0646\u062c\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span style=\"color: #000000; font-size: 16px;\">%<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0628\u0627 \u0627\u0646\u0648\u0627\u0639 \u0648\u0627\u062d\u062f\u0647\u0627 \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u062f\u060c \u0648\u0627\u0631\u062f \u0645\u0628\u062d\u062b padding \u0645\u06cc \u0634\u0648\u06cc\u0645.<em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/em><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">Padding&nbsp;<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f\u0645\u060c padding \u0641\u0636\u0627\u06cc \u0628\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0631\u0648\u0646 \u062a\u06af \u0628\u0627 border \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 padding \u062f\u0631 \u062c\u0647\u062a \u0645\u062e\u062a\u0644\u0641 \u0628\u0627\u0644\u0627\u060c \u067e\u0627\u06cc\u06cc\u0646\u060c \u0631\u0627\u0633\u062a \u0648 \u0686\u067e \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u06f5\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u0633\u0645\u062a \u0628\u0627\u0644\u0627\u06cc padding\u060c \u06f3\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u0633\u0645\u062a \u0631\u0627\u0633\u062a\u060c \u06f5\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u0633\u0645\u062a \u067e\u0627\u06cc\u06cc\u0646 \u0648 \u06f8\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u0633\u0645\u062a \u0686\u067e \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0648\u0627\u0642\u0639 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627\u06cc \u06af\u0641\u062a\u0647 \u0634\u062f\u0647\u060c \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0627\u062e\u0644 \u062a\u06af \u0628\u0627 \u0645\u0631\u0632 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        padding-top: 50px;\n        padding-right: 30px;\n        padding-bottom: 50px;\n        padding-left: 80px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Using individual padding properties&lt;\/h2&gt;\n\n    &lt;div&gt;\n      This div element has a top padding of 50px, a right padding of 30px, a\n      bottom padding of 50px, and a left padding of 80px.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0641\u0631\u0645\u062a \u062e\u0644\u0627\u0635\u0647 \u0634\u062f\u0647 padding \u0646\u06cc\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0628\u0627\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u0632\u06cc\u0631 \u062a\u0645\u0627\u0645\u06cc \u062c\u0647\u0627\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0648 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">padding-top padding-right padding-bottom padding-left<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  padding: 25px 50px 75px 100px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u062f\u06cc\u06af\u0631\u06cc \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0648 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a \u0631\u0627 \u0647\u0645\u0632\u0645\u0627\u0646 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644 \u062c\u0647\u062a \u0628\u0627\u0644\u0627\u060c \u0645\u0642\u062f\u0627\u0631 \u062f\u0648\u0645 \u062c\u0647\u062a \u0631\u0627\u0633\u062a \u0648 \u0686\u067e \u0648 \u0645\u0642\u062f\u0627\u0631 \u0633\u0648\u0645 \u062c\u0647\u062a \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">Padding-top (padding-right and left) padding-bottom<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  padding: 25px 50px 75px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0646\u0648\u0639 \u062f\u06cc\u06af\u0631 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0647\u0645\u0632\u0645\u0627\u0646 \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u0647\u0645\u0632\u0645\u0627\u0646 \u0648 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u060c \u062c\u0647\u062a \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u0648 \u0645\u0642\u062f\u0627\u0631 \u062f\u0648\u0645\u060c \u062c\u0647\u062a \u0631\u0627\u0633\u062a \u0648 \u0686\u067e \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  padding: 25px 50px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u062e\u0631 \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0645\u0627\u0645\u06cc \u062c\u0647\u0627\u062a \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  padding: 25px;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">margin&nbsp;<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u060c \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u0645\u0631\u0632 \u0627\u0644\u0645\u0627\u0646 \u0628\u0627 \u0627\u0637\u0631\u0627\u0641 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0632 \u0644\u062d\u0627\u0638 \u0645\u0642\u062f\u0627\u0631 \u06af\u06cc\u0631\u06cc \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0647\u0645\u0627\u0646\u0646\u062f padding \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 margin \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        border: 1px solid black;\n        margin-top: 100px;\n        margin-bottom: 100px;\n        margin-right: 150px;\n        margin-left: 80px;\n        background-color: lightblue;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Using individual margin properties&lt;\/h2&gt;\n\n    &lt;div&gt;\n      This div element has a top margin of 100px, a right margin of 150px, a\n      bottom margin of 100px, and a left margin of 80px.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0641\u0631\u0645\u062a \u062e\u0644\u0627\u0635\u0647 \u0634\u062f\u0647 margin<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  margin: 25px 50px 75px 100px;\n}\n\ndiv {\n  margin: 25px 50px 75px;\n}\n\ndiv {\n  margin: 25px 50px;\n}\n\ndiv {\n  margin: 25px;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc <span style=\"color: #000000;\">collapse<\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 margin \u06cc\u06a9 \u062e\u0627\u0635\u06cc\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u062a\u062d\u062a \u0639\u0646\u0648\u0627\u0646 collapse. \u0627\u06cc\u0646 \u062e\u0627\u0635\u06cc\u062a \u062a\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u062c\u0647\u062a \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 margin \u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0627\u0631\u062f. \u0627\u06cc\u0646 \u062e\u0627\u0635\u06cc\u062a \u0645\u0648\u062c\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u06af\u0627\u0647\u0627 margin \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 margin \u062a\u0628\u062f\u06cc\u0644 \u0634\u0648\u062f \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0622\u0646 \u0645\u0639\u0627\u062f\u0644 \u0628\u0627 \u0639\u062f\u062f \u0628\u0632\u0631\u06af\u062a\u0631 \u0628\u06cc\u0646 \u062c\u0647\u062a \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u06af\u0631\u062f\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u067e\u0627\u06cc\u06cc\u0646 \u062a\u06af h1 \u062f\u0627\u0631\u0627\u06cc margin \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06f5\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u062f\u0631 \u062c\u0647\u062a \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u062a\u06af h2 \u062f\u0627\u0631\u0627\u06cc margin \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06f2\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u062f\u0631 \u062c\u0647\u062a \u0628\u0627\u0644\u0627 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u06a9\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062a\u0639\u0631\u06cc\u0641\u06cc \u06a9\u0647 \u062f\u0627\u0634\u062a\u06cc\u0645\u060c \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u0627\u06cc\u0646 \u062f\u0648 \u062a\u06af \u0628\u0627\u06cc\u062f \u06f7\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0627\u0634\u062f \u0627\u0645\u0627 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u062e\u0627\u0635\u06cc\u062a\u06cc \u06a9\u0647 \u06af\u0641\u062a\u0645\u060c \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631 \u0639\u0648\u0636 \u06f7\u06f0 \u067e\u06cc\u06a9\u0633\u0644\u060c \u06f5\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      h1 {\n        margin: 0 0 50px 0;\n      }\n\n      h2 {\n        margin: 20px 0 0 0;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      In this example the h1 element has a bottom margin of 50px and the h2\n      element has a top margin of 20px. Then, the vertical margin between h1 and\n      h2 should have been 70px (50px + 20px). However, due to margin collapse,\n      the actual margin ends up being 50px.\n    &lt;\/p&gt;\n\n    &lt;h1&gt;Heading 1&lt;\/h1&gt;\n    &lt;h2&gt;Heading 2&lt;\/h2&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">border \u062f\u0631 css<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0631\u0632\u0647\u0627 \u062f\u0627\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0647\u0633\u062a\u0646\u062f. \u0645\u0631\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u062e\u0637 \u0628\u0627\u0634\u062f \u0648 \u06cc\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0637\u0648\u0637 \u062a\u06cc\u06a9\u0647 \u062a\u06cc\u06a9\u0647 \u0648 \u06cc\u0627 \u062f\u0627\u0631\u0627\u06cc \u0641\u0631\u0648\u0631\u0641\u062a\u06af\u06cc \u0628\u0627\u0634\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u067e\u0627\u06cc\u06cc\u0646 \u062a\u0645\u0627\u0645\u06cc \u0627\u0646\u0648\u0627\u0639 \u0645\u0631\u0632 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\np.dotted {border-style: dotted;}\np.dashed {border-style: dashed;}\np.solid {border-style: solid;}\np.double {border-style: double;}\np.groove {border-style: groove;}\np.ridge {border-style: ridge;}\np.inset {border-style: inset;}\np.outset {border-style: outset;}\np.none {border-style: none;}\np.hidden {border-style: hidden;}\np.mix {border-style: dotted dashed solid double;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;The border-style Property&lt;\/h2&gt;\n&lt;p&gt;This property specifies what kind of border to display:&lt;\/p&gt;\n\n&lt;p class=\"dotted\"&gt;A dotted border.&lt;\/p&gt;\n&lt;p class=\"dashed\"&gt;A dashed border.&lt;\/p&gt;\n&lt;p class=\"solid\"&gt;A solid border.&lt;\/p&gt;\n&lt;p class=\"double\"&gt;A double border.&lt;\/p&gt;\n&lt;p class=\"groove\"&gt;A groove border.&lt;\/p&gt;\n&lt;p class=\"ridge\"&gt;A ridge border.&lt;\/p&gt;\n&lt;p class=\"inset\"&gt;An inset border.&lt;\/p&gt;\n&lt;p class=\"outset\"&gt;An outset border.&lt;\/p&gt;\n&lt;p class=\"none\"&gt;No border.&lt;\/p&gt;\n&lt;p class=\"hidden\"&gt;A hidden border.&lt;\/p&gt;\n&lt;p class=\"mix\"&gt;A mixed border.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0647\u0631 \u0637\u0631\u0641 \u0627\u0632 \u0645\u0631\u0632 \u0631\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u062f\u0647\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627\u060c \u06a9\u0644 \u0645\u0631\u0632 \u0627\u0644\u0645\u0627\u0646 \u062f\u0627\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u06cc\u06a9\u0633\u0627\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f. \u062f\u0631 \u062d\u0627\u0644\u062a \u0632\u06cc\u0631\u060c \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0627\u0632 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. (\u0647\u0645\u0627\u0646\u0646\u062f padding \u0648 margin)<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p.one {\n  border-style: dotted solid;\n{\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u0632\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0631\u0632 \u0628\u0627\u0644\u0627\u060c \u0645\u0642\u062f\u0627\u0631 \u062f\u0648\u0645 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0631\u0632 \u0631\u0627\u0633\u062a \u0648 \u0686\u067e \u0648 \u0645\u0642\u062f\u0627\u0631 \u0633\u0648\u0645 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0631\u0632 \u067e\u0627\u06cc\u06cc\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p.two {\n   border-style: dotted solid double;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u0622\u062e\u0631 \u0646\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0631 \u0633\u0645\u062a \u0645\u0631\u0632 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0647\u0645\u0627\u0646\u0646\u062f margin \u0648 padding \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0632 \u0633\u0645\u062a \u0686\u067e\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0631\u0632 \u0628\u0627\u0644\u0627\u060c \u0631\u0627\u0633\u062a\u060c \u067e\u0627\u06cc\u06cc\u0646 \u0648 \u0686\u067e \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p.three {\n  border-style: dotted solid double dashed;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc border-width <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u0628\u0631\u0627\u06cc \u0645\u0631\u0632\u0647\u0627\u060c \u0639\u0631\u0636 (\u0636\u062e\u0627\u0645\u062a) \u0645\u0631\u0632 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0631\u0632 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0686\u0647 \u0636\u062e\u0627\u0645\u062a\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc border-width \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      p.one {\n        border-style: solid;\n        border-width: 5px;\n      }\n\n      p.two {\n        border-style: solid;\n        border-width: medium;\n      }\n\n      p.three {\n        border-style: dotted;\n        border-width: 2px;\n      }\n\n      p.four {\n        border-style: dotted;\n        border-width: thick;\n      }\n\n      p.five {\n        border-style: double;\n        border-width: 15px;\n      }\n\n      p.six {\n        border-style: double;\n        border-width: thick;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;The border-width Property&lt;\/h2&gt;\n    &lt;p&gt;This property specifies the width of the four borders:&lt;\/p&gt;\n\n    &lt;p class=\"one\"&gt;Some text.&lt;\/p&gt;\n    &lt;p class=\"two\"&gt;Some text.&lt;\/p&gt;\n    &lt;p class=\"three\"&gt;Some text.&lt;\/p&gt;\n    &lt;p class=\"four\"&gt;Some text.&lt;\/p&gt;\n    &lt;p class=\"five\"&gt;Some text.&lt;\/p&gt;\n    &lt;p class=\"six\"&gt;Some text.&lt;\/p&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; The \"border-width\" property does not work if it is used\n      alone. Always specify the \"border-style\" property to set the borders\n      first.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">padding \u0648 margin<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0647\u0631 \u0637\u0631\u0641 \u0627\u0632 \u0645\u0631\u0632 \u0631\u0627 \u0636\u062e\u0627\u0645\u062a \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u062f\u0647\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627\u060c \u06a9\u0644 \u0645\u0631\u0632 \u0627\u0644\u0645\u0627\u0646 \u062f\u0627\u0631\u0627\u06cc \u0636\u062e\u0627\u0645\u062a \u06cc\u06a9\u0633\u0627\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f. \u062f\u0631 \u062d\u0627\u0644\u062a \u0632\u06cc\u0631\u060c \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u0636\u062e\u0627\u0645\u062a \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0627\u0632 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. (\u0647\u0645\u0627\u0646\u0646\u062f padding \u0648 margin)<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p.one {\n  border-style: solid;\n  border-width: 5px 20px; \n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u0632\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u060c \u0636\u062e\u0627\u0645\u062a \u0645\u0631\u0632 \u0628\u0627\u0644\u0627\u060c \u0645\u0642\u062f\u0627\u0631 \u062f\u0648\u0645 \u0636\u062e\u0627\u0645\u062a \u0645\u0631\u0632 \u0631\u0627\u0633\u062a \u0648 \u0686\u067e \u0648 \u0645\u0642\u062f\u0627\u0631 \u0633\u0648\u0645 \u0636\u062e\u0627\u0645\u062a \u0645\u0631\u0632 \u067e\u0627\u06cc\u06cc\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p.two {\n  border-style: solid;\n  border-width: 20px 5px 30px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u0622\u062e\u0631 \u0646\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0636\u062e\u0627\u0645\u062a \u0647\u0631 \u0633\u0645\u062a \u0645\u0631\u0632 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0647\u0645\u0627\u0646\u0646\u062f margin \u0648 padding \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0632 \u0633\u0645\u062a \u0686\u067e\u060c \u0636\u062e\u0627\u0645\u062a \u0645\u0631\u0632 \u0628\u0627\u0644\u0627\u060c \u0631\u0627\u0633\u062a\u060c \u067e\u0627\u06cc\u06cc\u0646 \u0648 \u0686\u067e \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p.three {\n  border-style: solid;\n  border-width: 25px 10px 4px 35px; \n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0636\u062e\u0627\u0645\u062a\u060c \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0646\u06af \u0645\u0631\u0632 \u0631\u0627 \u0646\u06cc\u0632 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0631\u0627 \u0642\u0628\u0644 \u062a\u0631 \u062f\u0631 \u0642\u0633\u0645\u062a \u0631\u0646\u06af\u200c\u0647\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0632 \u0622\u0646 \u0645\u06cc\u200c\u06af\u0630\u0631\u06cc\u0645.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0645\u0627\u0645\u06cc \u0645\u0648\u0627\u0631\u062f \u0630\u06a9\u0631 \u0634\u062f\u0647 \u0631\u0627 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0644\u0627\u0635\u0647 \u0634\u062f\u0647 \u0646\u06cc\u0632 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f. \u0647\u0645\u0627\u0646\u0646\u062f \u0645\u0648\u0631\u062f\u06cc \u06a9\u0647 \u062f\u0631 background \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc border\u060c \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0636\u062e\u0627\u0645\u062a \u0645\u0631\u0632\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0631\u0632 (\u0627\u0644\u0632\u0627\u0645\u06cc)\u060c \u0631\u0646\u06af \u0645\u0631\u0632 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      p {\n        border: 5px solid red;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;The border Property&lt;\/h2&gt;\n    &lt;p&gt;\n      This property is a shorthand property for border-width, border-style, and\n      border-color.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\"> \u0648\u06cc\u0698\u06af\u06cc border-radius<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0622\u062e\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 \u0645\u0631\u0632\u200c\u0647\u0627\u060c \u0637\u0631\u0632 \u0627\u06cc\u062c\u0627\u062f \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u062f \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc border-radius \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      p.normal {\n        border: 2px solid red;\n      }\n\n      p.round1 {\n        border: 2px solid red;\n        border-radius: 5px;\n      }\n\n      p.round2 {\n        border: 2px solid red;\n        border-radius: 8px;\n      }\n\n      p.round3 {\n        border: 2px solid red;\n        border-radius: 12px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;The border-radius Property&lt;\/h2&gt;\n    &lt;p&gt;This property is used to add rounded borders to an element:&lt;\/p&gt;\n\n    &lt;p class=\"normal\"&gt;Normal border&lt;\/p&gt;\n    &lt;p class=\"round1\"&gt;Round border&lt;\/p&gt;\n    &lt;p class=\"round2\"&gt;Rounder border&lt;\/p&gt;\n    &lt;p class=\"round3\"&gt;Roundest border&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u062a\u0627 \u06af\u0648\u0634\u0647 \u062e\u0627\u0635\u06cc \u0631\u0627 \u0635\u0631\u0641\u0627 \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u0627 \u0647\u0631 \u06af\u0648\u0634\u0647 \u0631\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u06af\u0631\u062f \u06a9\u0646\u06cc\u062f\u060c \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0642\u062f\u0627\u0631 \u06f1\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u06af\u0648\u0634\u0647 \u0628\u0627\u0644\u0627 \u0686\u067e\u060c \u06f2\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u06af\u0648\u0634\u0647 \u0628\u0627\u0644\u0627 \u0631\u0627\u0633\u062a\u060c \u06f5 \u067e\u06cc\u06a9\u0633\u0644 \u06af\u0648\u0634\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0631\u0627\u0633\u062a \u0648 \u06f2\u06f5 \u067e\u06cc\u06a9\u0633\u0644 \u06af\u0648\u0634\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0686\u067e \u0628\u0631\u0627\u06cc \u06af\u0648\u0634\u0647 \u0645\u0631\u0632 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  border-top-left-radius: 10px;\n  border-top-right-radius: 20px;\n  border-bottom-right-radius: 5px;\n  border-bottom-left-radius: 25px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0642\u0628\u0644 \u0627\u0632 \u067e\u0627\u06cc\u0627\u0646 \u0628\u0631\u062f\u0646 \u0628\u062e\u0634 \u0645\u0631\u0632\u0647\u0627 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u0645 \u06a9\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0646\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0645\u0631\u0632\u0647\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0634\u0645\u0627 \u0635\u0631\u0641\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 \u0645\u0631\u0632 \u0633\u0645\u062a \u0686\u067e \u0627\u0633\u062a\u0627\u06cc\u0644 \u0648 \u06cc\u0627 \u0631\u0646\u06af \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {border-bottom-style: dotted;}<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0647 \u0647\u0645\u06cc\u0646 \u0634\u06a9\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u062c\u0647\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0627\u06cc\u0644\u060c \u0636\u062e\u0627\u0645\u062a \u0648 \u06cc\u0627 \u0631\u0646\u06af \u0631\u0627 \u0646\u06cc\u0632 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\"> \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 css <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0648\u0636\u0648\u0639 \u0628\u0639\u062f\u06cc \u0645\u0648\u0631\u062f \u0635\u062d\u0628\u062a\u060c \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0632 \u062c\u0645\u0644\u0647 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 css \u0645\u06cc \u0628\u0627\u0634\u062f. \u0648\u0642\u062a\u06cc \u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u060c \u0634\u0627\u0645\u0644 padding \u0648 margin \u0648 \u0645\u0631\u0632 \u0646\u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0648\u0627\u062d\u062f \u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0648 \u0645\u0637\u0644\u0642 \u06a9\u0647 \u067e\u06cc\u0634\u200c\u062a\u0631 \u06af\u0641\u062a\u0647 \u0634\u062f \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u067e\u0646\u062c \u0645\u0642\u062f\u0627\u0631 \u0645\u062e\u062a\u0644\u0641 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color: #000000; font-size: 16px;\">auto: \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0645\u06cc \u0628\u0627\u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0645\u0631\u0648\u0631\u06af\u0631 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Length: \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0628\u0647 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u062f\u0631 \u0648\u0627\u062d\u062f \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0633\u0644\u060c \u0633\u0627\u0646\u062a\u06cc \u0645\u062a\u0631 \u0648 &#8230;<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">%: \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0628\u0647 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062f\u0631\u0635\u062f\u06cc \u0627\u0632 \u0627\u0646\u062f\u0627\u0632\u0647 \u0627\u0644\u0645\u0627\u0646 \u067e\u062f\u0631<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Initial: \u0645\u0642\u062f\u0627\u0631 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0622\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Inherit: \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0627\u0646\u060c \u0645\u0642\u062f\u0627\u0631 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u067e\u062f\u0631 \u0631\u0627 \u0628\u0647 \u0627\u0631\u062b \u0645\u06cc \u0628\u0631\u062f.<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  height: 200px;\n  width: 50%;\n  background-color: powderblue;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">max-width<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0642\u0627\u0628\u0644 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u062f\u06cc\u0646 \u0645\u0639\u0646\u0627 \u06a9\u0647 \u0634\u0645\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0627 \u0686\u0647 \u0645\u0642\u062f\u0627\u0631\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 max-width \u0628\u0631\u0627\u06cc \u0645\u0642\u062f\u0627\u0631 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0639\u0631\u0636 \u0648 \u0627\u0632 max-height \u0628\u0631\u0627\u06cc \u062d\u062f\u0627\u06a9\u062b\u0631 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">div {\n  max-width: 500px;\n  height: 100px;\n  background-color: powderblue;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">&#8221; \u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0645\u062e\u0635\u0648\u0635\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0628\u0633\u06cc\u0627\u0631 \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f\u060c \u062a\u0627 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0627\u0631\u06cc\u062f \u0627\u0632 \u062f\u0627\u062f\u0646 \u0645\u0642\u062f\u0627\u0631 \u0645\u0634\u062e\u0635 \u0628\u0647 \u0639\u0631\u0636 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0639\u0631\u0636 \u062f\u0631 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u060c \u067e\u0631\u0647\u06cc\u0632 \u06a9\u0646\u06cc\u062f. &#8220;<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0645\u0642\u0627\u0644\u0647 \u06cc \u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css \u0628\u0627 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f&#8230;<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u062a\u0627 \u0645\u0628\u0627\u062d\u062b \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0632 css \u0634\u0627\u0645\u0644 \u0631\u0646\u06af\u200c\u0647\u0627\u060c \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0648 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0648 \u0641\u0627\u0635\u0644\u0647\u200c\u0647\u0627 \u0631\u0627 \u0622\u0645\u0648\u0632\u0634 \u062f\u0647\u0645. \u0627\u0628\u062a\u062f\u0627 \u0627\u0632 \u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u0645. \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u062a\u0631\u06cc\u0646 \u0648 \u067e\u0631\u06a9\u0627\u0628\u0631\u062f \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u062f\u0631 css \u0631\u0646\u06af\u200c\u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u06cc\u06a9 \u0645\u062a\u0646 \u0631\u0646\u06af \u062f\u0644\u062e\u0648\u0627\u0647\u06cc \u0631\u0627 [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":5565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-5564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-and-it-training"],"_links":{"self":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/5564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/comments?post=5564"}],"version-history":[{"count":4,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/5564\/revisions"}],"predecessor-version":[{"id":67459,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/5564\/revisions\/67459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media\/5565"}],"wp:attachment":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media?parent=5564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/categories?post=5564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/tags?post=5564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}