From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../backgrounds_and_borders/index.html | 24 +++---- .../selectors/combinators/index.html | 10 +-- .../learn/css/building_blocks/selectors/index.html | 26 ++++---- .../pseudo-classes_and_pseudo-elements/index.html | 6 +- .../type_class_and_id_selectors/index.html | 4 +- .../css/building_blocks/the_box_model/index.html | 6 +- .../building_blocks/values_and_units/index.html | 2 +- files/ru/learn/css/css_layout/flexbox/index.html | 34 +++++----- files/ru/learn/css/css_layout/floats/index.html | 50 +++++++------- files/ru/learn/css/css_layout/grids/index.html | 70 +++++++++---------- .../learn/css/css_layout/introduction/index.html | 78 +++++++++++----------- .../css_layout/multiple-column_layout/index.html | 42 ++++++------ .../ru/learn/css/css_layout/normal_flow/index.html | 4 +- .../ru/learn/css/css_layout/positioning/index.html | 56 ++++++++-------- .../css/css_layout/responsive_design/index.html | 24 +++---- .../first_steps/how_css_is_structured/index.html | 56 ++++++++-------- .../learn/css/first_steps/how_css_works/index.html | 16 ++--- .../learn/css/styling_text/fundamentals/index.html | 54 +++++++-------- .../ru/learn/css/styling_text/web_fonts/index.html | 10 +-- 19 files changed, 286 insertions(+), 286 deletions(-) (limited to 'files/ru/learn/css') diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html index ab427b275c..555908dac6 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders

CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.

-
.box {
+
.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
   url(big-star.png) center no-repeat, rebeccapurple;
 } 
@@ -116,7 +116,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):

 
-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top center;
@@ -125,7 +125,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
Допустимы значения длины и процентные:

 
-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: 20px 10%;
@@ -134,7 +134,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
Вы также можете смешивать значения ключевых слов с длинами или процентами, например:

 
-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px;
@@ -142,7 +142,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:

 
-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
@@ -178,7 +178,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
Другие свойства background- * также могут иметь значения, разделённые запятыми,  как и background-image:

 
-
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
 background-position: 10px 20px,  top right;

 
@@ -229,19 +229,19 @@ background-position: 10px 20px,  top right;

 
 
Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:

 
-
.box {
+
.box {
   border: 1px solid black;
 } 

 
 
Или мы можем нацеливаться на один край блока, например:

 
-
.box {
+
.box {
   border-top: 1px solid black;
 } 

 
 
Индивидуальные свойства этих сокращений будут следующими:

 
-
.box {
+
.box {
   border-width: 1px;
   border-style: solid;
   border-color: black;
@@ -249,7 +249,7 @@ background-position: 10px 20px,  top right;

 
 
И более детально:

 
-
.box {
+
.box {
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: black;
@@ -269,13 +269,13 @@ background-position: 10px 20px,  top right;

 
 
Например, чтобы сделать все четыре угла блока радиусом 10px:

 
-
.box {
+
.box {
   border-radius: 10px;
 } 

 
 
Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

 
-
.box {
+
.box {
   border-top-right-radius: 1em 10%;
 } 

 
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html
index e06ed6222c..2f82593f1f 100644
--- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html
@@ -29,7 +29,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
Селектор потомка — обычно представляется символом пробела ( ) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

 
-
body article p

+
body article p

 
 
В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

 
@@ -39,7 +39,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селектор пишется так:

 
-
article > p

+
article > p

 
 
Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

 
@@ -51,7 +51,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :

 
-
p + img

+
p + img

 
 
Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.

 
@@ -63,7 +63,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:

 
-
p ~ img

+
p ~ img

 
 
В приведённом ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идёт после него, будет выбран.

 
@@ -73,7 +73,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:

 
-
ul > li[class="a"]  {  }

+
ul > li[class="a"]  {  }

 
 
Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.

 
diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html
index 090f134d91..5bf4b0576c 100644
--- a/files/ru/learn/css/building_blocks/selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/index.html
@@ -47,7 +47,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

 
-
h1 {
+
h1 {
   color: blue;
 }
 
@@ -57,13 +57,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
А могу написать короче — просто отделив селекторы запятыми:

 
-
h1, .special {
+
h1, .special {
   color: blue;
 } 

 
 
Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

 
-
h1,
+
h1,
 .special {
   color: blue;
 } 

@@ -76,7 +76,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

 
-
h1 {
+
h1 {
   color: blue;
 }
 
@@ -86,7 +86,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

 
-
h1, ..special {
+
h1, ..special {
   color: blue;
 } 

 
@@ -98,41 +98,41 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
К этой группе относятся селекторы HTML-элементов, таких как <h1>.

 
-
h1 { }

+
h1 { }

 
 
К группе относятся и селекторы классов:

 
-
.box { }

+
.box { }

 
 
или селекторы идентификаторов (ID):

 
-
#unique { }

+
#unique { }

 
 
Селекторы атрибутов

 
 
Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

 
-
a[title] { }

+
a[title] { }

 
 
или основываясь на значении атрибута:

 
-
a[href="https://example.com"] { }

+
a[href="https://example.com"] { }

 
 
Псевдоклассы, псевдоэлементы

 
 
К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши

 
-
a:hover { }

+
a:hover { }

 
 
К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

 
-
p::first-line { }

+
p::first-line { }

 
 
Комбинаторы

 
 
И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):

 
-
article > p { }

+
article > p { }

 
 
Продолжение

 
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
index 0dca8d3f9d..dccba5ef04 100644
--- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
@@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p
 
 
Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

 
-
:pseudo-class-name

+
:pseudo-class-name

 
 
Простой пример псевдокласса

 
@@ -74,7 +74,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p
 
 
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::.

 
-
::pseudo-element-name

+
::pseudo-element-name

 
 

 
Примечание: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.

@@ -94,7 +94,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p
 
 
Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <p>, который находится внутри элемента <article>.

 
-
article p:first-child::first-line {
+
article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
 }

diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index 6494749f95..9898ab544a 100644
--- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
@@ -48,7 +48,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se
 
 
Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 

 
-
article :first-child {
+
article :first-child {
   font-weight: bold;
 }

 
@@ -56,7 +56,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se
 
 
Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:

 
-
article *:first-child {
+
article *:first-child {
   font-weight: bold;
 } 

 
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html
index 3fb706e69e..64aca4b04d 100644
--- a/files/ru/learn/css/building_blocks/the_box_model/index.html
+++ b/files/ru/learn/css/building_blocks/the_box_model/index.html
@@ -128,7 +128,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
Предположим, что в элементе есть следующий CSS определяющий width, height, margin, border, и padding:

 
-
.box {
+
.box {
   width: 350px;
   height: 150px;
   margin: 10px;
@@ -153,13 +153,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство box-sizing: border-box. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.

 
-
.box {
+
.box {
   box-sizing: border-box;
 } 

 
 
Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство box-sizing для элемента <html>, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью the CSS Tricks article on box-sizing.

 
-
html {
+
html {
   box-sizing: border-box;
 }
 *, *::before, *::after {
diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html
index d495b04979..689292d9fc 100644
--- a/files/ru/learn/css/building_blocks/values_and_units/index.html
+++ b/files/ru/learn/css/building_blocks/values_and_units/index.html
@@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
 
 
В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию  rgb():

 
-
h1 {
+
h1 {
   color: black;
   background-color: rgb(197,93,161);
 } 
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html
index 101646aea2..b675a1ec01 100644
--- a/files/ru/learn/css/css_layout/flexbox/index.html
+++ b/files/ru/learn/css/css_layout/flexbox/index.html
@@ -52,7 +52,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):

 
-
section {
+
section {
   display: flex;
 }

 
@@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
Попробуйте добавить следующую строчку в ваш файл:

 
-
flex-direction: column

+
flex-direction: column

 
 
Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.

 
@@ -101,7 +101,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:

 
-
flex-wrap: wrap

+
flex-wrap: wrap

 
 
Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:

 
@@ -115,12 +115,12 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить

 
-
flex-direction: row;
+
flex-direction: row;
 flex-wrap: wrap;

 
 
на

 
-
flex-flow: row wrap;

+
flex-flow: row wrap;

 
 
Гибкое изменение размеров flex элементов

 
@@ -128,7 +128,7 @@ flex-wrap: wrap;

 
 
Прежде всего, добавим следующее правило в конец вашего CSS кода:

 
-
article {
+
article {
   flex: 1;
 }

 
@@ -136,7 +136,7 @@ flex-wrap: wrap;

 
 
Теперь добавьте следующее правило в строку после предыдущего:

 
-
article:nth-of-type(3) {
+
article:nth-of-type(3) {
   flex: 2;
 }

 
@@ -144,7 +144,7 @@ flex-wrap: wrap;

 
 
Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:

 
-
article {
+
article {
   flex: 1 200px;
 }
 
@@ -180,7 +180,7 @@ article:nth-of-type(3) {
 
 
Теперь добавьте следующую строку в низ кода CSS:

 
-
div {
+
div {
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -198,7 +198,7 @@ article:nth-of-type(3) {
 
 
Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:

 
-
button:first-child {
+
button:first-child {
   align-self: flex-end;
 }

 
@@ -222,7 +222,7 @@ article:nth-of-type(3) {
 
 
Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:

 
-
button:first-child {
+
button:first-child {
   order: 1;
 }

 
@@ -237,7 +237,7 @@ article:nth-of-type(3) {
 
 
Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:

 
-
button:last-child {
+
button:last-child {
   order: -1;
 }

 
@@ -249,7 +249,7 @@ article:nth-of-type(3) {
 
 
HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.

 
-
section - article
+
section - article
           article
           article - div - button
                     div   button
@@ -261,13 +261,13 @@ article:nth-of-type(3) {
 
 
Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.

 
-
section {
+
section {
   display: flex;
 }

 
 
Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.

 
-
article {
+
article {
   flex: 1 200px;
 }
 
@@ -280,7 +280,7 @@ article:nth-of-type(3) {
 
 
Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.

 
-
article:nth-of-type(3) div:first-child {
+
article:nth-of-type(3) div:first-child {
   flex: 1 100px;
   display: flex;
   flex-flow: row wrap;
@@ -290,7 +290,7 @@ article:nth-of-type(3) {
 
 
Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.

 
-
button {
+
button {
   flex: 1;
   margin: 5px;
   font-size: 18px;
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html
index 195ffe4374..3106fe50a2 100644
--- a/files/ru/learn/css/css_layout/floats/index.html
+++ b/files/ru/learn/css/css_layout/floats/index.html
@@ -38,7 +38,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:

 
-
<h1>Simple float example</h1>
+
<h1>Simple float example</h1>
 
 <div class="box">Float</div>
 
@@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл .css — на ваше усмотрение):

 
-
body {
+
body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -67,7 +67,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box:

 
-
.box {
+
.box {
   float: left;
   margin-right: 15px;
   width: 150px;
@@ -83,7 +83,7 @@ translation_of: Learn/CSS/CSS_layout/Floats