{"id":1219,"date":"2024-07-31T12:15:47","date_gmt":"2024-07-31T10:15:47","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1219"},"modified":"2024-07-31T12:15:47","modified_gmt":"2024-07-31T10:15:47","slug":"13-css-padding","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/13-css-padding\/","title":{"rendered":"13. CSS Padding"},"content":{"rendered":"\n

La propiedad CSS padding <\/em><\/strong>se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos. Con CSS<\/strong>, tienes control total sobre el relleno. Hay propiedades para establecer el relleno para cada lado de un elemento (superior, derecho, inferior e izquierdo).<\/p>\n\n\n\n\n\n\n\n

Padding – lados individuales<\/h2>\n\n\n\n

CSS tiene propiedades para especificar el relleno para cada lado de un elemento:<\/p>\n\n\n\n

    \n
  • padding-top<\/li>\n\n\n\n
  • padding-right<\/li>\n\n\n\n
  • padding-bottom<\/li>\n\n\n\n
  • padding-left<\/li>\n<\/ul>\n\n\n\n

    Las propiedades pueden tener los siguientes valores:<\/p>\n\n\n\n

      \n
    • longitud<\/strong>: especifica un padding en px, pt, cm…<\/li>\n\n\n\n
    • % (porcentaje)<\/strong>: especifica un relleno en % del ancho del elemento contenedor<\/li>\n\n\n\n
    • inherit<\/strong>: especifica que el relleno (padding<\/em><\/strong>) se debe heredar del elemento padre<\/li>\n<\/ul>\n\n\n\n
      \n

      Nota: <\/strong>los valores negativos no est\u00e1n permitidos.<\/p>\n<\/blockquote>\n\n\n\n

      padding – forma corta<\/h2>\n\n\n\n

      Para acortar el c\u00f3digo, es posible especificar todas las propiedades padding<\/em> <\/strong>en una propiedad. La propiedad padding<\/em> <\/strong>es una propiedad abreviada para las siguientes propiedades de relleno individuales:<\/p>\n\n\n\n

      Ejm<\/strong><\/p>\n\n\n\n

      div {\n  padding: 25px 50px 75px 100px;\n}\n\n\ndiv {\n  padding: 25px 50px 75px;\n}\n\n\ndiv {\n  padding: 25px 50px;\n}\n\n\ndiv {\n  padding: 25px;\n}<\/pre>\n\n\n\n
      Relleno y ancho del elemento<\/h2>\n\n\n\n
      La propiedad CSS width<\/em> <\/strong>especifica el ancho del \u00e1rea de contenido del elemento. El \u00e1rea de contenido es la porci\u00f3n dentro del relleno<\/strong>, el borde<\/strong> y el margen<\/strong> de un elemento (el modelo de caja<\/strong>).<\/p>\n\n\n\n
      Entonces, si un elemento tiene un ancho espec\u00edfico, el relleno agregado a ese elemento se agregar\u00e1 al ancho total del elemento. Esto es a menudo un resultado indeseable.<\/p>\n\n\n\n
      Para mantener un ancho en 300px, por ejm, sin importar la cantidad de relleno, puedes usar la propiedad de box-sizing<\/em><\/strong>. Esto hace que el elemento mantenga su ancho real, si aumentas el relleno, el espacio de contenido disponible disminuir\u00e1.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      <!DOCTYPE html>\n<html>\n<head>\n<style>\ndiv.ex1 {\nwidth: 300px;\nbackground-color: yellow;\n}\n\ndiv.ex2 {\nwidth: 300px;\npadding: 25px;\nbox-sizing: border-box;\nbackground-color: lightblue;\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>Padding and element width - with box-sizing<\/h2>\n\n<div class=\"ex1\">This div is 300px wide.<\/div>\n<br>\n\n<div class=\"ex2\">El ancho de este div permanece en 300px,\na pesar de los 50px de relleno total izquierdo y derecho,\ndebido a la propiedad box-sizing: border-box.\n<\/div>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
      La propiedad CSS padding se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos. Con CSS, tienes control total sobre el relleno. Hay propiedades para establecer el relleno para cada lado de un elemento (superior, derecho, inferior e izquierdo).<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1219","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"La propiedad CSS padding se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos. Con CSS, tienes control total sobre el relleno. Hay propiedades para establecer el relleno para cada lado de un elemento (superior, derecho, inferior e izquierdo).","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1219"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1219\/revisions"}],"predecessor-version":[{"id":1220,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1219\/revisions\/1220"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}