---
title: Element.clientTop
slug: Web/API/Element/clientTop
translation_of: Web/API/Element/clientTop
---
<div>{{ APIRef("DOM") }}</div>

<p>Толщина верхней границы элемента в пикселях. Не включает в себя margin и padding. Свойство только для чтения.</p>

<p>Всё, что лежит между двумя местами (<code>offsetTop</code> и верх клиентской области) является границей элемента, потому что <code>offsetTop</code> показывает местоположение верха border элемента (не margin), в то время как верх клиентской области начинается сразу под border (клиентская область включает padding). Поэтому значение <strong>clientTop</strong> всегда будет равно значению <code>.getComputedStyle()</code> для "border-top-width". Например, если значение "border-top-width" равно нулю, то и <strong>clientTop</strong> тоже равно нулю.</p>

<div class="blockIndicator note">
<p><strong>Примечание:</strong> Это свойство округляет значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
</div>

<p>Основанные на <a href="en/Gecko">Gecko</a> приложения поддерживают <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">clientTop начиная с </span>Gecko 1.9 (<a href="en/Firefox_3">Firefox 3</a>, реализовано в  {{ Bug(111207) }}). Это свойство не поддерживается в  Firefox 2 и более ранних.</p>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="eval">var<em>top</em> = <var>element</var>.clientTop;
</pre>

<h2 id="Example" name="Example">Пример</h2>

<p>В следующей иллюстрации клиентская область показана белым (части под названиями "Top", "Right" и т. д. не имеют никакого отношения к клиентской области). Значение <strong>clientTop</strong> - расстояние между окончанием области margin (жёлтый) или padding и началом области контента (белый)</p>

<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
</div>
<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 190px;">Bottom</strong></div>

<h2 id="Notes" name="Notes">Примечание</h2>

<p><code>clientTop</code> был впервые введён в MS IE DHTML object model.</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM View', '#dom-element-clienttop', 'clientTop')}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat("api.Element.clientTop")}}</p>

<h2 id="References" name="References">Смотрите также</h2>

<ul>
 <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
</ul>