Oblazinjenje je prostor med vsebino in definirano obrobo elementa. Oblazinjenje pomeni dodajanje presledkov znotraj elementa, nadzor nad njegovim notranjim prostorom, s čimer vplivamo na njegove dimenzije in videz.
Kazalo
Oblazinjenje CSS
Lastnost CSS Padding se uporablja za ustvarjanje prostora med vsebino elementa in robom elementa. Vpliva le na vsebino znotraj elementa.
Oblazinjenje CSS se razlikuje od rob CSS saj je rob prostor med sosednjimi robovi elementa, oblazinjenje pa prostor med vsebino in robom elementa.
Z lastnostmi oblazinjenja lahko neodvisno spreminjamo zgornje, spodnje, levo in desno oblazinjenje. Lastnosti oblazinjenja CSS
oracle sql ni enako
CSS ponuja lastnosti za določanje oblazinjenja za posamezne strani elementa, ki so definirane na naslednji način:
- oblazinjenje-top : Nastavi oblazinjenje za zgornjo stran elementa.
- oblazinjenje-desno : Nastavi oblazinjenje za desno stran elementa.
- oblazinjenje-dno : Nastavi oblazinjenje za spodnjo stran elementa.
- oblazinjenje-levo : Nastavi oblazinjenje za levo stran elementa.
Lastnosti oblazinjenja imajo lahko naslednje vrednosti oblazinjenja:
- Dolžina - v cm, px, pt itd.
- Širina - % širine elementa.
- inherit- podedovanje oblazinjenja od nadrejenega elementa
Sintaksa:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>primer: Za prikaz uporabe lastnosti oblazinjenja, v kateri uporabimo oblazinjenje za vsako stran diva posebej.
HTML
Oblazinjenje Primer naslova><style>telo { rob: 0; oblazinjenje: 20px; širina: 50 %; } h2 { barva: zelena; } .myDiv { barva ozadja: svetlomodra; obroba: 2px polna črna; /* Uporaba oblazinjenja na vsaki strani posebej */ padding-top: 80px; oblazinjenje-desno: 100px; oblazinjenje-dno: 50px; oblazinjenje-levo: 80px; } .notranji { barva ozadja: roza; obroba: 2px polna črna; širina: 70px; višina: 50px; zaslon: flex; align-items: center; justify-content: center; } slog> glava> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS-oblazinjenje"><p>Oblazinjenje CSS</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/linear-search-java">linearno iskanje v Javi</a>
</blockquote> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Lastnost okrajšave za oblazinjenje v CSS</strong> </b> </h2><p dir='ltr'><span>Shorthand Padding Property v CSS vam omogoča, da nastavite oblazinjenje na vseh straneh (zgoraj, desno, spodaj, levo) elementa v eni vrstici z nekaterimi kombinacijami, tako da lahko zlahka uporabimo oblazinjenje za naš ciljni element.</span></p> <p dir='ltr'> <b> <strong>Obstajajo štirje primeri pri uporabi stenografske lastnosti:</strong> </b> </p> <ol><li value='1'><span>Če ima lastnost oblazinjenja eno vrednost.</span></li><li value='2'><span>Če lastnost oblazinjenja vsebuje dve vrednosti.</span></li><li value='3'><span>Če lastnost oblazinjenja vsebuje tri vrednosti.</span></li><li value='4'><span>Če lastnost oblazinjenja vsebuje štiri vrednosti.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Lastnost oblazinjenja za stenografijo za O</span> <b> <strong>ne Vrednost</strong> </b> </h3><p dir='ltr'><span>Če ima lastnost oblazinjenja eno vrednost, potem uporabi oblazinjenje za vse strani elementa. Na primer oblazinjenje: 20px uporabi 20 slikovnih pik oblazinjenje na vse strani enako.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/python-string-isnumeric-method">python je numerični</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Sintaksa:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>primer:</strong> </b> <span>Za prikaz uporabe 20px oblazinjenja na vseh straneh div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Lastnost oblazinjenja ima eno vrednost><style>telo { rob: 0; oblazinjenje: 20px; } h2 { barva: zelena; } .myDiv { barva ozadja: siva; obroba: 2px polna črna; poravnava besedila: sredina; širina: 40 %; /* Uporabi 10px oblazinjenje na vse strani */ oblazinjenje: 20px; } .notranji { višina: 70px; širina: 70px; barva ozadja: roza; zaslon: flex; align-items: center; justify-content: center; } slog> glava> <body> <div> <div>Paddingdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-oblazinjenje"><p>Lastnost oblazinjenja CSS z eno vrednostjo.</p> <h2 id='padding-property-for-two-values'><span>Lastnost oblazinjenja za T</span> <b> <strong>wo Vrednote</strong> </b> </h2><p dir='ltr'><span>Če lastnost oblazinjenja vsebuje dve vrednosti, potem prva vrednost velja za zgornje in spodnje oblazinjenje, druga vrednost pa za desno in levo oblazinjenje. Na primer – oblazinjenje: 10px 20px, tj. zgornje in spodnje oblazinjenje sta 10px, medtem ko je desno in levo oblazinjenje 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Sintaksa:</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>primer:</strong> </b> <span>Za prikaz uporabe lastnosti oblazinjenja z dvema vrednostma.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Lastnost oblazinjenja vsebuje dve vrednosti Valuetitle><style>telo { rob: 0; oblazinjenje: 20px; } h2 { barva: zelena; } .myDiv { barva ozadja: siva; obroba: 2px polna črna; poravnava besedila: sredina; širina: 40 %; oblazinjenje: 10px 20px; /* Uporabi 10px oblazinjenje na vrhu in dnu, 20px na desno in levo */ } .inner { height: 70px; širina: 70px; barva ozadja: roza; } slog> glava> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-padding"><p>oblazinjenje CSS</p> <h3 id='padding-property-for-three-values'><span>Lastnost oblazinjenja za</span> <b> <strong>Tri vrednote</strong> </b> </h3><p dir='ltr'><span>Če lastnost oblazinjenja vsebuje tri vrednosti, potem prva vrednost nastavi zgornje oblazinjenje, druga vrednost nastavi desno in levo oblazinjenje in tretja vrednost nastavi spodnje oblazinjenje.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-does-computer-work">kako deluje računalnik</a>
</blockquote> <p dir='ltr'><span>Na primer – oblazinjenje: 10px 20px 30px;</span></p> <ul><li value='1'><span>zgornji odmik je 10 slikovnih pik</span></li><li value='2'><span>desni in levi odmik sta 20 slikovnih pik</span></li><li value='3'><span>spodnji del je 30 slikovnih pik</span></li></ul><h3 id='syntax-3'> <b> <strong>Sintaksa:</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>primer:</strong> </b> <span>V tem primeru uporabljamo oblazinjenje s tremi vrednostmi.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Lastnost oblazinjenja vsebuje tri vrednostinaslov><style>telo { rob: 0; oblazinjenje: 20px; } h2 { barva: zelena; } .myDiv { barva ozadja: rumenozelena; obroba: 2px polna črna; poravnava besedila: sredina; širina: 40 %; oblazinjenje: 10px 20px 30px; /* Uporabi 10px oblazinjenje na vrhu, 20px oblazinjenje na desno in levo, 30px oblazinjenje na dno */ } .inner { height: 70px; širina: 70px; barva ozadja: siva; } slog> glava> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-oblazinjenje"><p>oblazinjenje CSS</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Lastnost oblazinjenja s štirimi vrednostmi</strong> </b> </h2><p dir='ltr'><span>Če lastnost oblazinjenja vsebuje štiri vrednosti, potem prva vrednost nastavi zgornje oblazinjenje, druga vrednost nastavi desno oblazinjenje, tretja vrednost nastavi spodnje oblazinjenje in četrta vrednost nastavi levo oblazinjenje.:</span></p> <p dir='ltr'><span>Na primer – oblazinjenje: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>zgornji odmik je 10 slikovnih pik</span></li><li value='2'><span>desni odmik je 5px</span></li><li value='3'><span>spodnji del je 15 slikovnih pik</span></li><li value='4'><span>levi odmik je 20 slikovnih pik</span></li></ul><h3 id='syntax-4'> <b> <strong>Sintaksa:</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>primer:</strong> </b> <span>Za prikaz uporabe lastnosti oblazinjenja s štirimi vrednostmi.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/jvm-architecture">jvm v Javi</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Lastnost oblazinjenja vsebuje štiri vrednosti<style>telo { rob: 0; oblazinjenje: 20px; } h2 { barva: zelena; } .myDiv { barva ozadja: cian; obroba: 2px polna črna; poravnava besedila: sredina; širina: 40 %; oblazinjenje: 10px 20px 15px 25px; /* Uporabi 10 slikovnih pik na vrhu, 20 slikovnih pik na desno, 15 slikovnih pik na dno in 25 slikovnih pik na levo */ } .inner { height: 70px; širina: 70px; barva ozadja: črna; barva: bela; zaslon: flex; align-items: center; justify-content: center; } slog> glava> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-oblazinjenje"><p>oblazinjenje CSS</p> <h2 id='all-css-padding-properties'><span>Vse lastnosti oblazinjenja CSS</span></h2><p dir='ltr'><span>Če združimo posamezne stranske lastnosti in skrajšane lastnosti, obstaja 5 skupnih lastnosti oblazinjenja CSS:</span></p> <table class="table"><tbody><tr><th><span>Lastnina</span></th><th><span>Opis</span></th></tr></tbody><tbody><tr><td> <b> <strong>oblazinjenje</strong> </b> </td><td><span>skrajšana lastnost za nastavitev vseh lastnosti oblazinjenja v eni deklaraciji</span></td></tr><tr><td> <b> <strong>oblazinjenje-dno</strong> </b> </td><td><span>Nastavi spodnji del elementa</span></td></tr><tr><td> <b> <strong>oblazinjenje-levo</strong> </b> </td><td><span>Nastavi levi odmik elementa</span></td></tr><tr><td> <b> <strong>oblazinjenje-desno</strong> </b> </td><td><span>Nastavi pravo oblazinjenje elementa</span></td></tr><tr><td> <b> <strong>oblazinjenje-top</strong> </b> </td><td><span>Nastavi zgornji odmik elementa</span></td></tr></tbody></table> <br> <br></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-collections/">Zbirke Java</a> </li><li> <a href="/c-set-function/">C++ Set Funkcija</a> </li><li> <a href="/numpy-tutorial/">Vadnica Numpy</a> </li><li> <a href="/money-banking/">Denar In Bančništvo</a> </li><li> <a href="/c-class-object/">C++-Razred In Objekt</a> </li><li> <a href="/bordering-countries-sea/">Obmejne Države In Morje</a> </li><li> <a href="/git-tutorial/">Vadnica Za Git</a> </li><li> <a href="/cpp-operator-overloading/">Cpp-Operator Preobremenitev</a> </li><li> <a href="/python-os-path-module/">Python Os-Path Module</a> </li><li> <a href="/python-math-library/">Python Matematična Knjižnica</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">numpy.reshape() v Pythonu</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Računalniški portal za geeke. Vsebuje dobro napisane, dobro premišljene in dobro razložene članke o računalništvu in programiranju, kvize in vprašanja za prakso/tekmovalno programiranje/razgovor v podjetju.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/numpy-reshape-python"> <i class="fa fa-external-link"></i> Preberi Več</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zanimivi Članki</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/ml-kg-converter">Pretvornik ml v kg (brezplačni spletni pretvornik)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-unit-testing">Vrste testiranja enot</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-url-encoder">Java URL kodirnik</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/laws-motion/">Zakoni-Gibanja</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-advanced-international-certificate-education-1311238">Kaj je Advanced International Certificate of Education (AICE)?</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">Priljubljene Objave</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-string-int">razčlenjevanje niza v int</a>
</li><li><a href="/data-structures-java">podatkovne strukture java</a>
</li><li><a href="/an-array-strings-c">c polje nizov</a>
</li><li><a href="/java-switch-statement">vklopi javo</a>
</li><li><a href="/avl-tree">avl drevo</a>
</li><li><a href="/how-read-csv-file-java">java branje datoteke csv</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 Vse Pravice Pridržane | <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti</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>