initial commit

1 files changed, 170 insertions, 0 deletions

diff --git a/files/ru/web/css/line-height/index.html b/files/ru/web/css/line-height/index.html
new file mode 100644
index 0000000000..28ad87f355
--- /dev/null
+++ b/files/ru/web/css/line-height/index.html
@@ -0,0 +1,170 @@
+---
+title: line-height
+slug: Web/CSS/line-height
+translation_of: Web/CSS/line-height
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/css">CSS</a> <strong><code>line-height</code></strong> устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%97%D0%B0%D0%BC%D0%B5%D1%89%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">незамещаемых</a> внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
+
+
+
+<p dir="rtl" id="Syntax"></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Keyword value */
+line-height: normal;
+
+/* Unitless values: use this number multiplied
+by the element's font size */
+line-height: 3.5;
+
+/* &lt;length&gt; values */
+line-height: 3em;
+
+/* &lt;percentage&gt; values */
+line-height: 34%;
+
+/* Global values */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+</pre>
+
+<p dir="rtl"></p>
+
+<p>Свойство <code>line-height</code> задаётся с помощью:</p>
+
+<ul>
+ <li><code><a href="#&lt;number>">&lt;числа&gt;</a></code></li>
+ <li><code><a href="#&lt;length>">&lt;величины&gt;</a></code></li>
+ <li><code><a href="#&lt;percentage>">&lt;процентного соотношения&gt;</a></code></li>
+ <li>ключевого слова <code><a href="#normal">normal</a></code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code><a id="normal" name="normal">normal</a></code></dt>
+ <dd>Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно <strong><code>1.2</code></strong>, в зависимости от элементов <code>font-family</code>.</dd>
+ <dt><code><a id="&lt;number>" name="&lt;number>">&lt;число&gt;</a></code></dt>
+ <dd>Используемое значение это бесконечное умножение {{cssxref("&lt;числа&gt;")}} на собственный размер шрифта элементов. Вычисленное значение это и есть  <code>&lt;число&gt;</code>. В большинстве случаев <strong> это предпочтительный способ установки значения</strong> <code>line-height</code> и позволяет избежать непредвиденных результатов при наследовании.</dd>
+ <dt><code><a id="&lt;length>" name="&lt;length>">&lt;величина&gt;</a></code></dt>
+ <dd>Указанная {{cssxref("&lt;величина&gt;")}} используется при вычислении высоты блока строки. Значение, заданное в  единицах <strong>em</strong> может привести к непредвидимым результатам (смотри пример ниже).</dd>
+ <dt><code><a id="&lt;percentage>" name="&lt;percentage>">&lt;процентное соотношение&gt;</a></code></dt>
+ <dd>Относительно размера шрифта самого элемента.</dd>
+ <dd>Relative to the font size of the element itself. The computed value is this {{cssxref("&lt;percentage&gt;")}} multiplied by the element's computed font size. <strong>Percentage</strong> values may produce unexpected results (see the second example below).</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: css">/* All rules below have the same resultant line height */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* number */
+div { line-height: 1.2em; font-size: 10pt; }   /* length */
+div { line-height: 120%;  font-size: 10pt; }   /* percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */</pre>
+
+<p>It is often more convenient to set <code>line-height</code> by using the {{cssxref("font")}} shorthand as shown above, but this requires the <code>font-family</code> property to be specified as well.</p>
+
+<h3 id="Prefer_unitless_numbers_for_line-height_values">Prefer unitless numbers for line-height values</h3>
+
+<p>This example shows why it is better to use {{cssxref("&lt;number&gt;")}} values instead of {{cssxref("&lt;length&gt;")}} values. We will use two {{HTMLElement("div")}} elements. The first, with the green border, uses a unitless <code>line-height</code> value. The second, with the red border, uses a <code>line-height</code> value defined in <code>em</code>s.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box green"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height.&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;div class="box red"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height.&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;!-- The first &lt;h1&gt; line-height is calculated from its own font-size   (30px × 1.1) = 33px  --&gt;
+&lt;!-- The second &lt;h1&gt; line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want --&gt;
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>line-height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.line-height")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li>
+</ul>