Відступ — це простір між вмістом і визначеною межею елемента. Заповнення означає додавання простору всередині елемента, контроль його внутрішнього простору, таким чином впливаючи на його розміри та зовнішній вигляд.
Зміст
CSS Padding
Властивість CSS Padding використовується для створення простору між вмістом елемента та межею елемента. Це впливає лише на вміст всередині елемента.
Доповнення CSS відрізняється від Поле CSS оскільки поле — це простір між межами суміжних елементів, а відступ — це простір між вмістом і межами елемента.
Ми можемо незалежно змінювати верхнє, нижнє, ліве та праве відступи за допомогою властивостей відступів. Властивості заповнення CSS
це білковий жир
CSS надає властивості для визначення відступів для окремих сторін елемента, які визначаються таким чином:
- набивка-верх : Встановлює відступ для верхньої сторони елемента.
- padding-right : Встановлює відступ для правого боку елемента.
- підкладка-низ : Встановлює відступ для нижньої сторони елемента.
- padding-left : Встановлює відступ для лівої сторони елемента.
Властивості заповнення можуть мати такі значення заповнення:
- Довжина - у см, px, pt тощо.
- Ширина - % ширини елемента.
- inherit - успадковує доповнення від батьківського елемента
Синтаксис:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>приклад: Щоб продемонструвати використання властивості padding, у якій ми застосовуємо padding до кожної сторони div окремо.
HTML Padding Exampletitle><style>тіло { поле: 0; відступ: 20 пікселів; ширина: 50%; } h2 { колір: зелений; } .myDiv { колір фону: світло-блакитний; рамка: 2 пікселя суцільний чорний; /* Застосування відступу до кожної сторони окремо */ padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; } .inner { колір фону: рожевий; рамка: 2 пікселя суцільний чорний; ширина: 70 пікселів; висота: 50px; дисплей: гнучкий; align-items: center; justify-content: центр; } стиль> голова> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS-заповнення"><p>CSS Padding</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/javascript-if-else">javascript оператор if</a>
</blockquote> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Властивість скорочення для заповнення в CSS</strong> </b> </h2><p dir='ltr'><span>Властивість скороченого відступу в CSS дозволяє встановити відступи з усіх боків (верхнього, правого, нижнього, лівого) елемента в одному рядку за допомогою деяких комбінацій, щоб ми могли легко застосувати відступ до нашого цільового елемента.</span></p> <p dir='ltr'> <b> <strong>Існує чотири випадки використання властивості скорочення:</strong> </b> </p> <ol><li value='1'><span>Якщо властивість padding має одне значення.</span></li><li value='2'><span>Якщо властивість padding містить два значення.</span></li><li value='3'><span>Якщо властивість padding містить три значення.</span></li><li value='4'><span>Якщо властивість padding містить чотири значення.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Властивість скороченого заповнення для O</span> <b> <strong>ne Значення</strong> </b> </h3><p dir='ltr'><span>Якщо властивість padding має одне значення, тоді воно застосовує padding до всіх сторін елемента. Наприклад, padding: 20px застосовує 20 пікселів padding до всіх сторін однаково.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/homogeneous-mixture-definition">однорідна суміш</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Синтаксис:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>Щоб продемонструвати застосування відступу 20 пікселів до всіх сторін div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Властивість Padding має одне значення Valuetitle><style>тіло { поле: 0; відступ: 20 пікселів; } h2 { колір: зелений; } .myDiv { колір фону: сірий; рамка: 2 пікселя суцільний чорний; вирівнювання тексту: центр; ширина: 40%; /* Застосовує відступ 10px до всіх сторін */ padding: 20px; } .inner {висота: 70px; ширина: 70 пікселів; колір фону: рожевий; дисплей: гнучкий; align-items: center; justify-content: центр; } стиль> голова> <body> <div> <div>Paddingdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-заповнення"><p>Властивість заповнення CSS з одним значенням.</p> <h2 id='padding-property-for-two-values'><span>Властивість Padding для T</span> <b> <strong>wo Цінності</strong> </b> </h2><p dir='ltr'><span>Якщо властивість padding містить два значення, то перше значення застосовується до верхнього та нижнього відступів, а друге значення — до правого та лівого відступів. Наприклад, відступ: 10px 20px, тобто верхній і нижній відступи становлять 10px, тоді як правий і лівий відступи – 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Синтаксис:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 10px padding to top and bottom, 20px padding to right and left */ padding: 10px 20px; }></pre><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>Щоб продемонструвати використання властивості padding із двома значеннями.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Властивість Padding містить два значення Valuetitle><style>тіло { поле: 0; відступ: 20 пікселів; } h2 { колір: зелений; } .myDiv { колір фону: сірий; рамка: 2 пікселя суцільний чорний; вирівнювання тексту: центр; ширина: 40%; відступ: 10px 20px; /* Застосовує відступ 10 пікселів зверху та знизу, 20 пікселів праворуч і ліворуч */ } .inner { height: 70px; ширина: 70 пікселів; колір фону: рожевий; } стиль> голова> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-заповнення"><p>Доповнення CSS</p> <h3 id='padding-property-for-three-values'><span>Властивість Padding для</span> <b> <strong>Три цінності</strong> </b> </h3><p dir='ltr'><span>Якщо властивість padding містить три значення, то перше значення встановлює верхній відступ, друге значення встановлює правий і лівий відступи, а третє значення встановлює нижній відступ.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/dynamic-programming">динамічне програмування</a>
</blockquote> <p dir='ltr'><span>Наприклад – padding: 10px 20px 30px;</span></p> <ul><li value='1'><span>верхній відступ становить 10 пікселів</span></li><li value='2'><span>відступ справа і зліва становить 20 пікселів</span></li><li value='3'><span>нижній відступ становить 30 пікселів</span></li></ul><h3 id='syntax-3'> <b> <strong>Синтаксис:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 10px padding to top, 20px padding to right and left, 30px padding to bottom */ padding: 10px 20px 30px; }></pre><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>У цьому прикладі ми використовуємо відступ із трьома значеннями.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Властивість Padding містить три значення: title><style>тіло { поле: 0; відступ: 20 пікселів; } h2 { колір: зелений; } .myDiv { колір фону: жовто-зелений; рамка: 2 пікселя суцільний чорний; вирівнювання тексту: центр; ширина: 40%; padding: 10px 20px 30px; /* Застосовує відступ 10 пікселів зверху, 20 пікселів праворуч і ліворуч, 30 пікселів внизу */ } .inner { height: 70px; ширина: 70 пікселів; колір фону: сірий; } стиль> голова> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-заповнення"><p>Доповнення CSS</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Властивість Padding має чотири значення</strong> </b> </h2><p dir='ltr'><span>Якщо властивість padding містить чотири значення, то перше значення встановлює верхній відступ, друге значення встановлює правий відступ, третє значення встановлює нижній відступ, а четверте значення встановлює лівий відступ.:</span></p> <p dir='ltr'><span>Наприклад – padding: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>верхній відступ становить 10 пікселів</span></li><li value='2'><span>правий відступ становить 5 пікселів</span></li><li value='3'><span>нижній відступ становить 15 пікселів</span></li><li value='4'><span>лівий відступ становить 20 пікселів</span></li></ul><h3 id='syntax-4'> <b> <strong>Синтаксис:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 10px padding to top, 20px padding to right, 15px padding to bottom, and 25px padding to left */ padding: 10px 20px 15px 25px; }></pre><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>Щоб продемонструвати використання властивості padding із чотирма значеннями.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-many-zeros-one-billion">скільки нулів в 1 мільярді</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Властивість Padding Contains Four Valuestitle><style>тіло { поле: 0; відступ: 20 пікселів; } h2 { колір: зелений; } .myDiv { колір фону: блакитний; рамка: 2 пікселя суцільний чорний; вирівнювання тексту: центр; ширина: 40%; padding: 10px 20px 15px 25px; /* Застосовує відступ 10 пікселів зверху, 20 пікселів праворуч, 15 пікселів внизу та 25 пікселів ліворуч */ } .inner { height: 70px; ширина: 70 пікселів; колір фону: чорний; колір: білий; дисплей: гнучкий; align-items: center; justify-content: центр; } стиль> голова> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-заповнення"><p>Доповнення CSS</p> <h2 id='all-css-padding-properties'><span>Усі властивості заповнення CSS</span></h2><p dir='ltr'><span>Поєднуючи окремі бічні властивості та скорочені властивості, існує 5 загальних властивостей CSS-заповнення:</span></p> <table class="table"><tbody><tr><th><span>Власність</span></th><th><span>опис</span></th></tr></tbody><tbody><tr><td> <b> <strong>оббивка</strong> </b> </td><td><span>скорочена властивість для встановлення всіх властивостей заповнення в одній декларації</span></td></tr><tr><td> <b> <strong>підкладка-низ</strong> </b> </td><td><span>Встановлює нижній відступ елемента</span></td></tr><tr><td> <b> <strong>padding-left</strong> </b> </td><td><span>Встановлює лівий відступ елемента</span></td></tr><tr><td> <b> <strong>padding-right</strong> </b> </td><td><span>Встановлює правильний відступ елемента</span></td></tr><tr><td> <b> <strong>набивка-верх</strong> </b> </td><td><span>Встановлює верхній відступ елемента</span></td></tr></tbody></table> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Категорія</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/linux-shell-commands/">Команди Оболонки Linux</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Прем'єр-Ліга Geeks 2023</a> </li><li> <a href="/analysis-of-algorithms/">Аналіз алгоритмів</a> </li><li> <a href="/time-complexity/">Часова Складність</a> </li><li> <a href="/daa-tutorial/">Підручник Daa</a> </li><li> <a href="/spring-tutorial/">Весняний Підручник</a> </li><li> <a href="/divide-and-conquer/">Розділити і завоювати</a> </li><li> <a href="/csharp-generic-list/">Csharp-Generic-List</a> </li><li> <a href="/python-scipy-tutorial/">Підручник З Python Scipy</a> </li><li> <a href="/sql-functions/">Sql-Функції</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Різниця між орлом і змієм</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Eagle vs Kite зі списком головних відмінностей і прикладами в реальному часі, включаючи зображення, див. також чоловіка, жінку, собаку, кішку, брутто, чисту, java, базу даних, науку, загальну, англійську тощо.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/difference-between-eagle"> <i class="fa fa-external-link"></i> Читати Далі</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Цікаві Статті</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/complete-guide-florida-bright-futures-scholarship-1311394">Повний посібник щодо стипендії Florida Bright Futures</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/understanding-file-sizes-bytes">Розуміння розмірів файлів | Байти, КБ, МБ, ГБ, ТБ, ПБ, EB, ZB, YB</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mysql-export-table-csv">Експорт таблиці MySQL у CSV</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/100-best-car-names-funny">100+ найкращих назв автомобілів (кумедні, круті та спортивні назви для автомобілів)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-use-concatenate-excel">Як використовувати Concatenate в Excel</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Популярні Пости</h2>
<div class="content">
<ul class="list"> <li><a href="/java-stack">стек java</a>
</li><li><a href="/ubuntu-ipconfig">ipconfig на Ubuntu</a>
</li><li><a href="/java-convert-int-string">перетворити int на рядок java</a>
</li><li><a href="/osi-model">шари моделі osi</a>
</li><li><a href="/selection-sort-java">сортування вибору java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Всі Права Захищені | <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>