{"id":3113,"date":"2017-08-06T19:42:16","date_gmt":"2017-08-06T16:42:16","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/html-block-layout\/"},"modified":"2020-04-05T22:14:17","modified_gmt":"2020-04-05T19:14:17","slug":"html-block-layout","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/html-block-layout\/","title":{"rendered":"HTML block layout"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;HTML block layout&#8221; content_max_width=&#8221;none&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;3.0.92&#8243; custom_padding=&#8221;0px|||&#8221; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; border_style=&#8221;solid&#8221;]In this lesson we&#8217;ll talk about html block layout. There two main approaches in html layouts &#8211; block html layout and table html layout. Table html layout hasn&#8217;t already used. it is not comfortable.<br \/>\nHtml block layout is very comfortable, flexible and understandable. The key element is div tag. This tag has got two key characteristics &#8211; width and height. Also we&#8217;ll consider indents. In CSS it is margin (external indents) and padding (internal indents). Padding and margin can use with block and inline elements.<!--more--><br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=zy2rG7nRUy8&#8243; _builder_version=&#8221;3.0.47&#8243;][\/et_pb_video][et_pb_dmb_code_snippet title=&#8221;Code lesson (HTML)&#8221; code=&#8221;PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDx0aXRsZT48L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgo8L2hlYWQ+Cjxib2R5PgoKICAgIDxkaXYgY2xhc3M9ImZpcnN0Q2xhc3MiPgogICAgICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBGdWdpYXQgcmVpY2llbmRpcyBhdCBhbWV0IGRlYml0aXMgZGVsZWN0dXMuIFF1aWEgdWxsYW0gY29ycG9yaXMsIGVhIGVvcywgcXVvcyBtb2xlc3RpYXMgZGljdGEgZGVsZWN0dXMgcXVpYnVzZGFtIGRvbG9yIHBsYWNlYXQgaWxsdW0gZGViaXRpcyBjb21tb2RpIGVzc2U\/IExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBNYWduYW0gdGVtcG9yZSBjb25zZXF1YXR1ciBoYXJ1bSBvcHRpbyBsYWJvcmlvc2FtIHZlcm8gdmVuaWFtIHByYWVzZW50aXVtIHF1aXMgdm9sdXB0YXRlcywgZXhjZXB0dXJpLCBlc3NlIGF0cXVlIGVpdXMsIGZ1Z2l0IGlzdGUgYXQgbnVsbGEgcXVhc2kgYWxpYXMgY29uc2VxdXVudHVyLjwvcD4KICAgIDwvZGl2PgoKICAgIDxhIGhyZWY9IiMiPtGB0YHRi9C70LrQsDwvYT4KCjwvYm9keT4KPC9odG1sPg==&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430&#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;3.0.66&#8243;]PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDx0aXRsZT48L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgo8L2hlYWQ+Cjxib2R5PgoKICAgIDxkaXYgY2xhc3M9ImZpcnN0Q2xhc3MiPgogICAgICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBGdWdpYXQgcmVpY2llbmRpcyBhdCBhbWV0IGRlYml0aXMgZGVsZWN0dXMuIFF1aWEgdWxsYW0gY29ycG9yaXMsIGVhIGVvcywgcXVvcyBtb2xlc3RpYXMgZGljdGEgZGVsZWN0dXMgcXVpYnVzZGFtIGRvbG9yIHBsYWNlYXQgaWxsdW0gZGViaXRpcyBjb21tb2RpIGVzc2U\/IExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBNYWduYW0gdGVtcG9yZSBjb25zZXF1YXR1ciBoYXJ1bSBvcHRpbyBsYWJvcmlvc2FtIHZlcm8gdmVuaWFtIHByYWVzZW50aXVtIHF1aXMgdm9sdXB0YXRlcywgZXhjZXB0dXJpLCBlc3NlIGF0cXVlIGVpdXMsIGZ1Z2l0IGlzdGUgYXQgbnVsbGEgcXVhc2kgYWxpYXMgY29uc2VxdXVudHVyLjwvcD4KICAgIDwvZGl2PgoKICAgIDxhIGhyZWY9IiMiPtGB0YHRi9C70LrQsDwvYT4KCjwvYm9keT4KPC9odG1sPg==[\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=&#8221;Code lesson (CSS)&#8221; code=&#8221;Zmlyc3RDbGFzcyB7CiAgICB3aWR0aDogMzAwcHg7CiAgICBoZWlnaHQ6IDMwMHB4OwogICAgYmFja2dyb3VuZC1jb2xvcjogI2UxZTFlMTsKICAgIC8qbWFyZ2luOiAxMHB4IDIwcHggMzBweCA0MHB4OyovCiAgICAvKm1hcmdpbjogMCBhdXRvOyovCiAgICBwYWRkaW5nOiAxMHB4IDE1cHg7Cn0KCmEgewogICAgZGlzcGxheTogYmxvY2s7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7CiAgICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgICB3aWR0aDogMjUwcHg7CiAgICBtYXJnaW46IDAgYXV0bzsKfQ==&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430 &#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;3.0.66&#8243;]Zmlyc3RDbGFzcyB7CiAgICB3aWR0aDogMzAwcHg7CiAgICBoZWlnaHQ6IDMwMHB4OwogICAgYmFja2dyb3VuZC1jb2xvcjogI2UxZTFlMTsKICAgIC8qbWFyZ2luOiAxMHB4IDIwcHggMzBweCA0MHB4OyovCiAgICAvKm1hcmdpbjogMCBhdXRvOyovCiAgICBwYWRkaW5nOiAxMHB4IDE1cHg7Cn0KCmEgewogICAgZGlzcGxheTogYmxvY2s7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7CiAgICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgICB3aWR0aDogMjUwcHg7CiAgICBtYXJnaW46IDAgYXV0bzsKfQ==[\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221; hover_enabled=&#8221;0&#8243;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this lesson we&#8217;ll talk about html block layout. There two main approaches in html layouts &#8211; block html layout and table html layout. Table html layout hasn&#8217;t already used. it is not comfortable. Html block layout is very comfortable, flexible and understandable. The key element is div tag. This tag has got two key [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0434\u0432\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 - \u0431\u043b\u043e\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0438 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430. \u0422\u0430\u0431\u043b\u0438\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u0430 \u0443\u0436\u0435 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c\u044e, \u043e\u043d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u0430.\r\n\u0411\u043b\u043e\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430, \u0433\u0438\u0431\u043a\u0430\u044f \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 - \u0442\u0435\u0433 <div>. \u0423 \u0431\u043b\u043e\u043a\u043e\u0432 \u0435\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b - \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430. \u0422\u0430\u043a\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043a\u0430\u043a \u0432\u043d\u0435\u0448\u043d\u0438\u0439 (margin) \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 (padding) \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0443\u0440\u043e\u043a\u0430 \u0443 \u043c\u0435\u043d\u044f \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443, \u0441\u0434\u0435\u043b\u0430\u0432 \u0435\u0435 \u0431\u043b\u043e\u0447\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c. \u041d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e. \u041a\u043e\u0434 \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u044b\u0448\u0435\u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e. \u0412\u0430\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e <strong>padding \u0438 margin<\/strong> \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u044b \u043a\u043e \u0432\u0441\u0435\u043c \u0432\u0438\u0434\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 - \u0438 \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u043c, \u0438 \u0431\u043b\u043e\u0447\u043d\u044b\u043c.<!--more-->\r\n\r\nhttps:\/\/www.youtube.com\/watch?v=zy2rG7nRUy8\r\n\r\n<pre><code><!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <title><\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"firstClass\">\r\n        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat reiciendis at amet debitis delectus. Quia ullam corporis, ea eos, quos molestias dicta delectus quibusdam dolor placeat illum debitis commodi esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tempore consequatur harum optio laboriosam vero veniam praesentium quis voluptates, excepturi, esse atque eius, fugit iste at nulla quasi alias consequuntur.<\/p>\r\n    <\/div>\r\n\r\n    <a href=\"#\">\u0441\u0441\u044b\u043b\u043a\u0430<\/a>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\r\n\r\n<pre><code>.firstClass {\r\n    width: 300px;\r\n    height: 300px;\r\n    background-color: #e1e1e1;\r\n    \/*margin: 10px 20px 30px 40px;*\/\r\n    \/*margin: 0 auto;*\/\r\n    padding: 10px 15px;\r\n}\r\n\r\na {\r\n    display: block;\r\n    background-color: red;\r\n    padding: 10px 20px;\r\n    width: 250px;\r\n    margin: 0 auto;\r\n}\r\n<\/code><\/pre>","_et_gb_content_width":"","footnotes":""},"categories":[257,219],"tags":[259,243],"class_list":["post-3113","post","type-post","status-publish","format-standard","hentry","category-html-css","category-tutorials","tag-css-en","tag-html-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML layout - Kamil Abzalov&#039;s blog<\/title>\n<meta name=\"description\" content=\"HTML block layout\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML layout - Kamil Abzalov&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"HTML block layout\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-06T16:42:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-05T19:14:17+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"HTML block layout\" \/>\n<meta name=\"twitter:description\" content=\"HTML block layout\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"HTML block layout\",\"datePublished\":\"2017-08-06T16:42:16+00:00\",\"dateModified\":\"2020-04-05T19:14:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/\"},\"wordCount\":708,\"commentCount\":0,\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"HTML and CSS\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/\",\"name\":\"HTML layout - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-08-06T16:42:16+00:00\",\"dateModified\":\"2020-04-05T19:14:17+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"HTML block layout\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/blochnaja-model-verstki\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML block layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML layout - Kamil Abzalov's blog","description":"HTML block layout","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/","og_locale":"en_US","og_type":"article","og_title":"HTML layout - Kamil Abzalov's blog","og_description":"HTML block layout","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-08-06T16:42:16+00:00","article_modified_time":"2020-04-05T19:14:17+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"HTML block layout","twitter_description":"HTML block layout","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"HTML block layout","datePublished":"2017-08-06T16:42:16+00:00","dateModified":"2020-04-05T19:14:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/"},"wordCount":708,"commentCount":0,"keywords":["css","html"],"articleSection":["HTML and CSS","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/","name":"HTML layout - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-08-06T16:42:16+00:00","dateModified":"2020-04-05T19:14:17+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"HTML block layout","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/blochnaja-model-verstki\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"HTML block layout"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=3113"}],"version-history":[{"count":5,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3113\/revisions"}],"predecessor-version":[{"id":31171,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3113\/revisions\/31171"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=3113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=3113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=3113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}