{"id":1136,"date":"2011-11-21T18:12:37","date_gmt":"2011-11-21T18:12:37","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1136"},"modified":"2012-02-29T21:02:59","modified_gmt":"2012-02-29T21:02:59","slug":"margin-vs-padding%e2%80%8f","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/","title":{"rendered":"margin vs padding\u200f"},"content":{"rendered":"<p><strong><em>margin<\/em> sirve para establecer la separacion entre dos elementos<\/strong>, aunque parezca complicado de entender, no lo es. Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la propiedad <em>margin<\/em>podremos separar esos dos elementos, \u00bfasi esta mejor eh?.<\/p>\n<p>Se utiliza as\u00ed:<\/p>\n<pre>.clase{ margin: 10px ;}<\/pre>\n<p>Haciendo eso separaremos 10px la imagen del texto, ojo que estamos separando 10px de arriba, derecha, abajo e izquierda, si queremos separar 10px solo de la izquierda, deber\u00edamos hacer lo siguiente:<\/p>\n<pre>.clase{ margin: 10px 0px 0px 0px}<\/pre>\n<p>Como vemos, podemos aplicar margenes por orientaci\u00f3n, los valores se aplican <strong>siguiendo el sentido de las agujas del reloj<\/strong>, es decir:<\/p>\n<pre>.clase{ margin: arriba derecha abajo izquierda;}<\/pre>\n<p>o tambi\u00e9n podemos hacerlo as\u00ed:<\/p>\n<pre>.clase{\r\n \u00a0\u00a0\u00a0\u00a0 margin-top: 0px;\r\n \u00a0\u00a0\u00a0\u00a0 margin-right: 0px;\r\n \u00a0\u00a0\u00a0\u00a0 margin-bottom: 0px;\r\n \u00a0\u00a0\u00a0  margin-left: 10px;\r\n }<\/pre>\n<p>Claro que no hace falta especificar todas las orientaciones, solo basta con poner la que queremos especificar.<\/p>\n<p>El <strong>padding<\/strong> a primera vista es igual al margin, incluso en determinadas ocaciones podremos usar las dos y conseguiremos el mismo resultado visual, la diferencia esta en que <strong>padding no separa dos elementos, mas bien crea un espacio dentro uno de ellos<\/strong>, por ejemplo, si tenemos un bloque con texto dentro y una imagen al lado bien pegada, al aplicarle padding al bloque con texto, los elementos siguen pegados, pero vemos un espacio al igual que si usaramos la propiedad margin, solo que esta vez se creo un espacio <strong>dentro del bloque<\/strong> (con margin se hubiera creado el espacio fuera del bloque) con texto dentro.<\/p>\n<p>La forma de aplicarlo es igual que margin, solo que esta vez el nombre ser\u00e1 <strong>padding<\/strong>:<\/p>\n<pre>.clase{ padding: 10px; }\r\n\r\n.clase{ padding: 10px 0px 0px 0px; }\r\n\r\n.clase{ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n    padding-top: 0px;\r\n \u00a0\u00a0 padding-right: 0px;\r\n \u00a0\u00a0 padding-bottom: 0px;\r\n \u00a0\u00a0 padding-left: 10px;\r\n }<\/pre>\n<p>Como vemos, su uso es id\u00e9ntico a <strong>margin<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>margin sirve para establecer la separacion entre dos elementos, aunque parezca complicado de entender, no lo es. Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la propiedad marginpodremos separar esos dos elementos, \u00bfasi esta mejor eh?. Se utiliza as\u00ed: .clase{ margin: 10px ;} Haciendo eso separaremos 10px la imagen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[109],"class_list":["post-1136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-margenes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>margin vs padding\u200f - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"margin vs padding\u200f - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"margin sirve para establecer la separacion entre dos elementos, aunque parezca complicado de entender, no lo es. Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la propiedad marginpodremos separar esos dos elementos, \u00bfasi esta mejor eh?. Se utiliza as\u00ed: .clase{ margin: 10px ;} Haciendo eso separaremos 10px la imagen [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding\u200f\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2011-11-21T18:12:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-02-29T21:02:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/\",\"name\":\"margin vs padding\u200f - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2011-11-21T18:12:37+00:00\",\"dateModified\":\"2012-02-29T21:02:59+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"margin vs padding\u200f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"margin vs padding\u200f - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"margin vs padding\u200f - Jose Aguilar Blog","og_description":"margin sirve para establecer la separacion entre dos elementos, aunque parezca complicado de entender, no lo es. Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la propiedad marginpodremos separar esos dos elementos, \u00bfasi esta mejor eh?. Se utiliza as\u00ed: .clase{ margin: 10px ;} Haciendo eso separaremos 10px la imagen [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding\u200f\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-11-21T18:12:37+00:00","article_modified_time":"2012-02-29T21:02:59+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/","url":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/","name":"margin vs padding\u200f - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2011-11-21T18:12:37+00:00","dateModified":"2012-02-29T21:02:59+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/margin-vs-padding%e2%80%8f\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"margin vs padding\u200f"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1136"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1136\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}