CSS Padding
Відступ — це простір між вмістом і визначеною межею елемента. Заповнення означає додавання простору всередині елемента, контроль його внутрішнього простору, таким чином впливаючи на його розміри та зовнішній вигляд.
Зміст
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> <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> <h3 id='syntax-1'> <b> <strong>Синтаксис: </strong> </b> </h3> <pre>.element { /* Applies 20px padding to all sides */ padding: 20px; } </pre> <p dir='ltr'> <b> <strong>приклад: </strong> </b> <span>Щоб продемонструвати застосування відступу 20 пікселів до всіх сторін div. </span> </p>HTML <code> <pre> <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>.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> <pre> <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> <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>.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> <pre> <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>.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>HTML <code> <pre> <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>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Поділитися </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=CSS Padding&url=https://www.techcodeview.com/uk/css-padding"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/uk/css-padding"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/uk/css-padding&title=CSS Padding"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Вам Може Сподобатися </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/uk/python-lists" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/python-list/66/python-lists.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Списки Python" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/uk/python-lists">Списки Python </a>
</h4>
</div> <div class="group">
<a href="/uk/explained-what-is-false-information-24234" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/advice-teachers/69/explained-what-is-false-information.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Пояснення: що таке неправдива інформація (фейкові новини)?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/uk/explained-what-is-false-information-24234">Пояснення: що таке неправдива інформація (фейкові новини)? </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Кращі Статті </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/mouse-and-keyboard-automation-using-python">
<img src="https://techcodeview.com/img/python/69/mouse-and-keyboard-automation-using-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Автоматизація миші та клавіатури за допомогою Python" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/mouse-and-keyboard-automation-using-python" class="hover:text-tech-500 transition-colors line-clamp-3">Автоматизація миші та клавіатури за допомогою Python </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/program-to-add-two-fractions">
<img src="https://techcodeview.com/img/mathematical/48/program-to-add-two-fractions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Програма для додавання двох фракцій" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/program-to-add-two-fractions" class="hover:text-tech-500 transition-colors line-clamp-3">Програма для додавання двох фракцій </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/informatica-etl">
<img src="https://techcodeview.com/img/informatica-tutorial/03/informatica-etl.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Informatica ETL" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/informatica-etl" class="hover:text-tech-500 transition-colors line-clamp-3">Informatica ETL </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/mysql-left-join">
<img src="https://techcodeview.com/img/mysql-tutorial/05/mysql-left-join.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL LEFT JOIN" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/mysql-left-join" class="hover:text-tech-500 transition-colors line-clamp-3">MySQL LEFT JOIN </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/multiple-linear-regression">
<img src="https://techcodeview.com/img/machine-learning/78/multiple-linear-regression.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Множинна лінійна регресія" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/multiple-linear-regression" class="hover:text-tech-500 transition-colors line-clamp-3">Множинна лінійна регресія </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/maven-repository">
<img src="https://techcodeview.com/img/maven-tutorial/24/maven-repository.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Репозиторій Maven" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/maven-repository" class="hover:text-tech-500 transition-colors line-clamp-3">Репозиторій Maven </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/how-delete-line-nano-editor">
<img src="https://techcodeview.com/img/picked/30/how-delete-line-nano-editor.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як видалити рядок у Nano Editor?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/how-delete-line-nano-editor" class="hover:text-tech-500 transition-colors line-clamp-3">Як видалити рядок у Nano Editor? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/deletion-binary-search-tree">
<img src="https://techcodeview.com/img/accolite/27/deletion-binary-search-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Видалення в бінарному дереві пошуку (BST)" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/deletion-binary-search-tree" class="hover:text-tech-500 transition-colors line-clamp-3">Видалення в бінарному дереві пошуку (BST) </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/minimum-xor-value-pair">
<img src="https://techcodeview.com/img/dsa/38/minimum-xor-value-pair.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Мінімальна пара значень XOR" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/minimum-xor-value-pair" class="hover:text-tech-500 transition-colors line-clamp-3">Мінімальна пара значень XOR </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/uk/top-command-linux-unix-with-examples">
<img src="https://techcodeview.com/img/linux-system-admin/38/top-command-linux-unix-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Головна команда в Linux/Unix із прикладами" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/uk/top-command-linux-unix-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">Головна команда в Linux/Unix із прикладами </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Категорія </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/uk/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Блог
</a> <a href="/uk/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Перетворення Java
</a> <a href="/uk/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Математика
</a> <a href="/uk/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Колекції Java
</a> <a href="/uk/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Відмінності
</a> <a href="/uk/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Рядок Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Цікаві Статті </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/53/12-best-creative-writing-colleges.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="12 найкращих коледжів і програм творчого письма" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/blog/">Блог </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/12-best-creative-writing-colleges-131896">12 найкращих коледжів і програм творчого письма </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java/08/different-ways-of-reading-a-text-file-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Різні способи читання текстового файлу в Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/java/">Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/different-ways-of-reading-a-text-file-in-java">Різні способи читання текстового файлу в Java </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/it-problems-solutions/35/inequalities-latex.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Нерівності в LaTeX" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/it-problems-solutions/">Іт Проблеми Та Рішення </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/inequalities-latex">Нерівності в LaTeX </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/digital-electronics/10/full-adder.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Повний суматор" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/digital-electronics/">Цифрова Електроніка </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/full-adder">Повний суматор </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/strings/88/longest-repeating-and-non-overlapping-substring.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Найдовший підрядок, що повторюється та не перекривається" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/strings/">рядки </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/longest-repeating-and-non-overlapping-substring">Найдовший підрядок, що повторюється та не перекривається </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/linux-tutorial/54/linux-which-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linux яка команда" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/linux-tutorial/">Підручник Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/linux-which-command">Linux яка команда </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Всі Права Захищені |
<a href="//www.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>