El relleno es el espacio entre el contenido y el borde definido de un elemento. El relleno significa agregar espacios dentro del elemento, controlando su espacio interno, afectando así sus dimensiones y apariencia.
Tabla de contenidos
Relleno CSS
La propiedad CSS Padding se utiliza para crear espacio entre el contenido del elemento y el borde del elemento. Solo afecta el contenido dentro del elemento.
El relleno CSS es diferente de margen CSS ya que el margen es el espacio entre los bordes de los elementos adyacentes y el relleno es el espacio entre el contenido y el borde del elemento.
Podemos cambiar de forma independiente el relleno superior, inferior, izquierdo y derecho usando las propiedades de relleno. Propiedades de relleno CSS
¿Puede una clase abstracta tener un constructor?
CSS proporciona propiedades para especificar el relleno para lados individuales de un elemento que se definen de la siguiente manera:
- acolchado superior : Establece el relleno para la parte superior del elemento.
- relleno-derecha : Establece el relleno para el lado derecho del elemento.
- fondo acolchado : Establece el relleno para la parte inferior del elemento.
- relleno-izquierda : Establece el relleno para el lado izquierdo del elemento.
Las propiedades de relleno pueden tener los siguientes valores de relleno:
- Longitud: en cm, px, pt, etc.
- Ancho- % ancho del elemento.
- heredar: heredar el relleno del elemento padre
Sintaxis:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Ejemplo: Para demostrar el uso de la propiedad padding en la que aplicamos relleno a cada lado del div individualmente.
HTML Título de ejemplo de relleno><style>cuerpo { margen: 0; relleno: 20px; ancho: 50%; } h2 { color: verde; } .myDiv { color de fondo: azul claro; borde: 2px negro sólido; /* Aplicando relleno a cada lado individualmente */ padding-top: 80px; relleno-derecha: 100px; fondo de relleno: 50px; relleno-izquierda: 80px; } .inner { color de fondo: rosa; borde: 2px negro sólido; ancho: 70 píxeles; altura: 50 píxeles; pantalla: flexible; alinear elementos: centro; justificar-contenido: centro; } estilo> cabeza> <body> <div> <div>Pad_Boxdiv> div> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="Relleno CSS"><p>Relleno CSS</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/mvc-architecture-java">mvc para java</a>
</blockquote> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Propiedad abreviada para relleno en CSS</strong> </b> </h2><p dir='ltr'><span>La propiedad Shorthand Padding en CSS le permite configurar el relleno en todos los lados (arriba, derecha, abajo, izquierda) de un elemento en una sola línea con algunas combinaciones, para que podamos aplicar relleno fácilmente a nuestro elemento de destino.</span></p> <p dir='ltr'> <b> <strong>Hay cuatro casos al utilizar la propiedad abreviada:</strong> </b> </p> <ol><li value='1'><span>Si la propiedad de relleno tiene un valor.</span></li><li value='2'><span>Si la propiedad de relleno contiene dos valores.</span></li><li value='3'><span>Si la propiedad de relleno contiene tres valores.</span></li><li value='4'><span>Si la propiedad de relleno contiene cuatro valores.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Propiedad de relleno taquigráfica para O</span> <b> <strong>ne Valor</strong> </b> </h3><p dir='ltr'><span>Si la propiedad de relleno tiene un valor, aplica relleno a todos los lados de un elemento. Por ejemplo, padding: 20px aplica 20 píxeles de relleno en todos los lados por igual.</span></p> <h3 id='syntax-1'> <b> <strong>Sintaxis:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Ejemplo:</strong> </b> <span>Para demostrar la aplicación de un relleno de 20 píxeles a todos los lados del div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propiedad de relleno tiene un título de valor><style>cuerpo { margen: 0; relleno: 20px; } h2 { color: verde; } .myDiv { color de fondo: gris; borde: 2px negro sólido; alineación de texto: centro; ancho: 40%; /* Aplica un relleno de 10px a todos los lados */ padding: 20px; } .inner { altura: 70px; ancho: 70 píxeles; color de fondo: rosa; pantalla: flexible; alinear elementos: centro; justificar-contenido: centro; } estilo> cabeza> <body> <div> <div>Rellenodiv> div> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="Relleno CSS"><p>Propiedad de relleno CSS con un valor.</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/binary-tree-java">árbol binario java</a>
</blockquote> <h2 id='padding-property-for-two-values'><span>Propiedad de relleno para T</span> <b> <strong>dos valores</strong> </b> </h2><p dir='ltr'><span>Si la propiedad de relleno contiene dos valores, entonces el primer valor se aplica al relleno superior e inferior, y el segundo valor se aplica al relleno derecho e izquierdo. Por ejemplo, relleno: 10 px 20 px, es decir, el relleno superior e inferior es de 10 px, mientras que el relleno derecho e izquierdo es de 20 px.</span></p> <h3 id='syntax-2'> <b> <strong>Sintaxis:</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>Ejemplo:</strong> </b> <span>Demostrar el uso de una propiedad de relleno con dos valores.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/datetime-c">c# fecha y hora</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propiedad de relleno contiene dos valores.<style>cuerpo { margen: 0; relleno: 20px; } h2 { color: verde; } .myDiv { color de fondo: gris; borde: 2px negro sólido; alineación de texto: centro; ancho: 40%; relleno: 10px 20px; /* Aplica un relleno de 10 píxeles en la parte superior e inferior, un relleno de 20 píxeles en la derecha y la izquierda */ } .inner { height: 70px; ancho: 70 píxeles; color de fondo: rosa; } estilo> cabeza> <body> <div> <div>Boxdiv> div> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="relleno css"><p>relleno CSS</p> <h3 id='padding-property-for-three-values'><span>Propiedad de relleno para</span> <b> <strong>Tres valores</strong> </b> </h3><p dir='ltr'><span>Si la propiedad de relleno contiene tres valores, entonces el primer valor establece el relleno superior, el segundo valor establece el relleno derecho e izquierdo y el tercer valor establece el relleno inferior.</span></p> <p dir='ltr'><span>Por ejemplo – relleno: 10px 20px 30px;</span></p> <ul><li value='1'><span>el relleno superior es de 10px</span></li><li value='2'><span>el relleno derecho e izquierdo es de 20px</span></li><li value='3'><span>el relleno inferior es de 30px</span></li></ul><h3 id='syntax-3'> <b> <strong>Sintaxis:</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>Ejemplo:</strong> </b> <span>En este ejemplo, utilizamos relleno con tres valores.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propiedad de relleno contiene tres valores<style>cuerpo { margen: 0; relleno: 20px; } h2 { color: verde; } .myDiv { color de fondo: amarilloverde; borde: 2px negro sólido; alineación de texto: centro; ancho: 40%; relleno: 10px 20px 30px; /* Aplica un relleno de 10 px en la parte superior, un relleno de 20 px a derecha e izquierda, un relleno de 30 px en la parte inferior */ } .inner { height: 70px; ancho: 70 píxeles; color de fondo: gris; } estilo> cabeza> <body> <div> <div>Boxdiv> div> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="Relleno CSS"><p>relleno CSS</p> <p dir='ltr'> <br></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-string-char">cadena a carácter</a>
</blockquote> <h2 id='padding-property-having-four-values'> <b> <strong>Propiedad de relleno que tiene cuatro valores</strong> </b> </h2><p dir='ltr'><span>Si la propiedad padding contiene cuatro valores, entonces el primer valor establece el relleno superior, el segundo valor establece el relleno derecho, el tercer valor establece el relleno inferior y el cuarto valor establece el relleno izquierdo.:</span></p> <p dir='ltr'><span>Por ejemplo – relleno: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>el relleno superior es de 10px</span></li><li value='2'><span>el relleno derecho es 5px</span></li><li value='3'><span>el relleno inferior es de 15px</span></li><li value='4'><span>el relleno izquierdo es 20px</span></li></ul><h3 id='syntax-4'> <b> <strong>Sintaxis:</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>Ejemplo:</strong> </b> <span>Demostrar el uso de una propiedad de relleno con cuatro valores.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propiedad de relleno contiene cuatro valores<style>cuerpo { margen: 0; relleno: 20px; } h2 { color: verde; } .myDiv { color de fondo: cian; borde: 2px negro sólido; alineación de texto: centro; ancho: 40%; relleno: 10px 20px 15px 25px; /* Aplica un relleno de 10px en la parte superior, un relleno de 20px en la derecha, un relleno de 15px en la parte inferior y un relleno de 25px en la izquierda */ } .inner { height: 70px; ancho: 70 píxeles; color de fondo: negro; color blanco; pantalla: flexible; alinear elementos: centro; justificar-contenido: centro; } estilo> cabeza> <body> <div> <div>Boxdiv> div> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="Relleno CSS"><p>relleno CSS</p> <h2 id='all-css-padding-properties'><span>Todas las propiedades de relleno CSS</span></h2><p dir='ltr'><span>Combinando propiedades laterales individuales y propiedades abreviadas, hay 5 propiedades totales de relleno CSS:</span></p> <table class="table"><tbody><tr><th><span>Propiedad</span></th><th><span>Descripción</span></th></tr></tbody><tbody><tr><td> <b> <strong>relleno</strong> </b> </td><td><span>propiedad abreviada para establecer todas las propiedades de relleno en una declaración</span></td></tr><tr><td> <b> <strong>fondo acolchado</strong> </b> </td><td><span>Establece el relleno inferior de un elemento.</span></td></tr><tr><td> <b> <strong>relleno-izquierda</strong> </b> </td><td><span>Establece el relleno izquierdo de un elemento.</span></td></tr><tr><td> <b> <strong>relleno-derecha</strong> </b> </td><td><span>Establece el relleno correcto de un elemento.</span></td></tr><tr><td> <b> <strong>acolchado superior</strong> </b> </td><td><span>Establece el relleno superior de un elemento.</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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/current-gk/">Gk Actual</a> </li><li> <a href="/python-numpy-arraymanipulation/">Manipulación De Matrices Numpy De Python</a> </li><li> <a href="/how/">Cómo</a> </li><li> <a href="/c-const-keyword/">Palabra Clave Constante De C++</a> </li><li> <a href="/computer-networks-network-layer/">Redes Informáticas-Capa De Red</a> </li><li> <a href="/seo-tutorial/">Tutorial Seo</a> </li><li> <a href="/xml-tutorial/">Tutorial Xml</a> </li><li> <a href="/log4j-tutorial/">Tutorial De Log4J</a> </li><li> <a href="/technical-scripter-2020-cat/">Guionista Técnico 2020</a> </li><li> <a href="/linux-commands/">Comandos De Linux</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">Redes Informáticas-Capa De Red</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Redes Informáticas-Capa De Red</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/computer-networks-network-layer/"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/pandas-concat-function-python">Función pandas.concat() en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-16-9oz-bottles-does-it-take-fill-2-liters">¿Cuántas botellas de 16,9 oz se necesitan para llenar 2 litros?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-variables">Variables de Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/122-tone-words-set-mood-your-story-131140">122 palabras tonales para crear el ambiente en tu historia</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/0-1-knapsack-problem">0/1 Problema de mochila</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">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/analog-communication">comunicación analógica</a>
</li><li><a href="/stoi-function-c">de pie</a>
</li><li><a href="/how-check-if-variable-is-not-null-javascript">no nulo en js</a>
</li><li><a href="/how-check-if-variable-is-not-null-javascript">no nulo en js</a>
</li><li><a href="/npm-clear-cache">fuerza de limpieza de caché de npm</a>
</li><li><a href="/coomeet-alternatives">sitio web como coomeet</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 Todos Los Derechos Reservados | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</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>