{"id":272,"date":"2019-01-23T20:14:58","date_gmt":"2019-01-23T18:14:58","guid":{"rendered":"http:\/\/tutorial.bernatcortina.cat\/?page_id=272"},"modified":"2019-01-23T20:14:58","modified_gmt":"2019-01-23T18:14:58","slug":"margin-i-padding","status":"publish","type":"page","link":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/","title":{"rendered":"Margin i Padding"},"content":{"rendered":"<h1 style=\"text-align: justify;\">Model de caixes CSS<\/h1>\n<p style=\"text-align: justify;\">El model de caixes o \u201cbox model\u201d \u00e9s segurament la caracter\u00edstica m\u00e9s important del llenguatge de full d\u2019estils CSS, ja que condiciona el disseny de totes les p\u00e0gines web. <strong>El model de caixes \u00e9s el comportament de CSS que fa que tots els elements de les p\u00e0gines es representin mitjan\u00e7ant caixes rectangulars.<\/strong><\/p>\n<p style=\"text-align: justify;\">Les caixes d\u2019una p\u00e0gina es creen autom\u00e0ticament. Cada cop que s\u2019insereix una etiqueta HTML, es crea una nova caixa rectangular que engloba els continguts d\u2019aquest element.<\/p>\n<p style=\"text-align: justify;\"><em>Exemple. Tres caixes que creen les tres etiquetes HTML que inclou la p\u00e0gina:<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-273\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png\" alt=\"\" width=\"1384\" height=\"456\" \/><\/em><\/p>\n<p style=\"text-align: justify;\"><em>Les caixes marcades amb el requadre:<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-274\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.05.10.png\" alt=\"\" width=\"1308\" height=\"336\" \/><\/em><\/p>\n<p style=\"text-align: justify;\">Les caixes de les p\u00e0gines <strong>no s\u00f3n visibles a simple vista perqu\u00e8 inicialment no mostren cap color de fons ni de marc<\/strong>. La seg\u00fcent imatge mostra una p\u00e0gina on s\u2019ha for\u00e7at que totes les caixes mostrin el seu marc: ( * { border:1px solid Black;} )<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-275\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-72.png\" alt=\"\" width=\"808\" height=\"416\" \/><\/p>\n<p style=\"text-align: justify;\">Un altre exemple, for\u00e7ant la p\u00e0gina de Google per qu\u00e8 totes les caixes mostrin el seu marc:<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-276\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-73.png\" alt=\"\" width=\"883\" height=\"443\" \/><\/p>\n<p style=\"text-align: justify;\">Un altre exemple, la p\u00e0gina del Regi\u00f37: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-277\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-74.png\" alt=\"\" width=\"883\" height=\"747\" \/><\/p>\n<p style=\"text-align: justify;\">Els navegadors creen i col\u00b7loquen les caixes de forma autom\u00e0tica, el CSS permet modificar totes les seves caracter\u00edstiques. <strong>Cadascuna de les caixes est\u00e0 formada per sis parts<\/strong>, tal i com es mostra a la seg\u00fcent imatge:<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-278\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png\" alt=\"\" width=\"883\" height=\"831\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-279\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-76.png\" alt=\"\" width=\"737\" height=\"564\" \/><\/p>\n<p style=\"text-align: justify;\">Les parts que composen cada caixa i el seu ordre de visualitzaci\u00f3 des del punt de vista de l\u2019usuari s\u00f3n:<\/p>\n<ul style=\"text-align: justify;\">\n<li><strong>Content<\/strong> (contingut): es tracta del contingut HTML de l\u2019element (les paraules d\u2019un par\u00e0graf, una imatge, el text d\u2019una llista d\u2019elements, etc.)<\/li>\n<li><strong>Padding<\/strong> (Emplenament, farcit o \u201crelleno\u201d): espai lliure opcional existent entre el contingut i el marge.<\/li>\n<li><strong>Border<\/strong> (Vora o \u201cborde\u201d): l\u00ednia que tanca completament el contingut i el seu emplenament.<\/li>\n<li><strong>Background image <\/strong>(imatge de fons): imatge que es mostra per darrera del contingut i l\u2019espai d\u2019emplenament.<\/li>\n<li><strong>Background color <\/strong>(color de fons): color que es mostra per darrera del contingut i l\u2019espai d\u2019emplenament.<\/li>\n<li><strong>Margin <\/strong>(marge): Separaci\u00f3 opcional existent entre la caixa i la resta de caixes adjacents.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">El <strong>padding<\/strong> i el <strong>margin<\/strong> s\u00f3n transparents, per tant l\u2019espai que ocupa el <strong>padding<\/strong> es mostra el color o imatge de fons (si est\u00e0 definit) i en l\u2019espai ocupat per el <strong>margin<\/strong> es mostra el color o imatge de fons del seu element pare (si est\u00e0 definit). Si cap element pare t\u00e9 definit un color o imatge de fons, es mostra el color o imatge de fons de la pr\u00f2pia p\u00e0gina (si est\u00e0 definit).<\/p>\n<p style=\"text-align: justify;\">Si una caixa defineix tant un color com una imatge de fons, la imatge t\u00e9 m\u00e9s prioritat i \u00e9s la que es visualitza. No obstant, si la imatge de fons no cobreix totalment la caixa de l\u2019element o si la imatge t\u00e9 zones transparents, tamb\u00e9 \u00e9s visualitzar\u00e0 el color de fons. Combinant imatges transparents i colors de fons es poden aconseguir efectes gr\u00e0fics molt interessants.<\/p>\n<h1 style=\"text-align: justify;\">Amplada i al\u00e7ada<\/h1>\n<p style=\"text-align: justify;\">La propietat CSS que controla l\u2019amplada de la caixa dels elements s\u2019anomena <strong>width<\/strong>.<\/p>\n<p style=\"text-align: justify;\">La propietat CSS que controla l\u2019al\u00e7ada dels elements s\u2019anomena <strong>height<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Les propietats <strong>width <\/strong>i <strong>height<\/strong> no admeten valors negatius i els valors en percentatge es calculen a partir de l\u2019amplada del seu element pare. El valor <strong>inherit<\/strong> indica que l\u2019amplada de l\u2019element hereta el del seu pare. El valor <strong>auto<\/strong>, que \u00e9s el que s\u2019usa si no s\u2019estableix de forma expl\u00edcita un valor a aquesta propietat, indica que el navegador ha de calcular autom\u00e0ticament l\u2019amplada de l\u2019element, tenint en compte els seus continguts i lloc disponible a la p\u00e0gina.<\/p>\n<p style=\"text-align: justify;\"><em>Exemple. S\u2019estableix el valor de l\u2019amplada de l\u2019element &lt;section&gt; noticies: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-280\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.08.55.png\" alt=\"\" width=\"704\" height=\"770\" \/><br \/>\n<\/em><\/p>\n<h1 style=\"text-align: justify;\">Margin<\/h1>\n<p style=\"text-align: justify;\">El CSS defineix quatre propietats per controlar cada un dels marges horitzontals i verticals d\u2019un element. <strong>Margin-top, margin-right, margin-bottom, margin-left.<\/strong><\/p>\n<p style=\"text-align: justify;\">Cada una de les propietats estableix la separaci\u00f3 entre la vora (<strong>border<\/strong>) de la caixa i la resta de caixes adjacents.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-281\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-77.png\" alt=\"\" width=\"493\" height=\"364\" \/><\/p>\n<p style=\"text-align: justify;\"><em><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-282\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-78.png\" alt=\"\" width=\"737\" height=\"752\" \/>\u00a0<\/em><\/p>\n<p style=\"text-align: justify;\"><em>Exemple. Par\u00e0graf amb marge esquerre<\/em>:<\/p>\n<p style=\"text-align: justify;\">HTML: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-283\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-79.png\" alt=\"\" width=\"883\" height=\"156\" \/><\/p>\n<p style=\"text-align: justify;\">CSS: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-284\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-80.png\" alt=\"\" width=\"422\" height=\"141\" \/><\/p>\n<p style=\"text-align: justify;\">RESULTAT: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-285\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-81.png\" alt=\"\" width=\"883\" height=\"212\" \/><\/p>\n<p style=\"text-align: justify;\">Els marges verticals (<strong>margin-top i margin-bottom<\/strong>) nom\u00e9s es poden aplicar als elements de bloc (un par\u00e0graf, per exemple. Per\u00f2 no un enlla\u00e7) i les imatges, mentre que els marges laterals (<strong>margin-left i margin-right<\/strong>) es poden aplicar a qualsevol element.<\/p>\n<p style=\"text-align: justify;\">A part de les quatre propietats que controlen cada un dels marges de l\u2019element, CSS defineix una propietat especial que permet establir els quatre marges de forma simult\u00e0nia. Aquestes propietats especials es denominen \u201c<em>propietats shorthand<\/em>\u201d i CSS defineix varies propietats d\u2019aquest tipus.<\/p>\n<p style=\"text-align: justify;\">La propietat que permet definir de forma simult\u00e0nia els quatre marges s\u2019anomena <strong>margin<\/strong>.<\/p>\n<ul style=\"text-align: justify;\">\n<li>Si nom\u00e9s s\u2019indica <strong>un valor<\/strong>, tots els marges tenen aquest valor.<\/li>\n<li>Si s\u2019indiquen <strong>dos valors<\/strong>, el primer s\u2019assigna al marge superior i inferior, i el segon s\u2019assigna als marges esquerra i dreta.<\/li>\n<li>Si s\u2019indiquen <strong>tres valors<\/strong>, el primer s\u2019assigna al marge superior, el tercer s\u2019assigna al marge inferior i el segon valor s\u2019assigna als marges esquerra i dreta.<\/li>\n<li>Si s\u2019indiquen els <strong>quatre valors<\/strong>, l\u2019ordre d\u2019assignaci\u00f3 \u00e9s: marge superior, marge dreta, marge inferior i marge esquerra.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><em>Exemple.\u00a0 Els mateixos marges un a un, i tots simult\u00e0niament. <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-286\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-82.png\" alt=\"\" width=\"575\" height=\"368\" \/><br \/>\n<\/em><\/p>\n<p style=\"text-align: justify;\">El comportament dels <strong>marges verticals<\/strong> \u00e9s m\u00e9s complex del qu\u00e8 sembla. Quan s\u2019ajunten dos o m\u00e9s marges verticals, es <strong>fusionaran de forma autom\u00e0tica<\/strong> i l\u2019altura del nou marge ser\u00e0 igual a l\u2019al\u00e7ada del marge m\u00e9s alt dels que s\u2019ha fusionat.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-287\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-83.png\" alt=\"\" width=\"585\" height=\"372\" \/><\/p>\n<p style=\"text-align: justify;\">De la mateixa forma, si un element est\u00e0 contingut <strong>dins un altre element<\/strong>, els seus marges verticals es fusionen i el resultat \u00e9s un nou marge de la mateixa altura que el marge m\u00e9s gran dels que s\u2019han fusionat:<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-288\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-84.png\" alt=\"\" width=\"733\" height=\"289\" \/><\/p>\n<p style=\"text-align: justify;\">Encara que al principi pugui semblar un comportament estrany, la ra\u00f3 per la que s\u2019usa d\u2019aquesta forma \u00e9s per establir <strong>uniformitat<\/strong> a les p\u00e0gines web.<\/p>\n<p style=\"text-align: justify;\">En una p\u00e0gina amb varis par\u00e0grafs, si no hi hagu\u00e9s aquest comportament i s\u2019establ\u00eds un determinat marge a tots els par\u00e0grafs, el primer par\u00e0graf no mostraria un aspecte homogeni respecte als altres. Motiu pel qual es fusionen autom\u00e0ticament els marges verticals.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-289\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-85.png\" alt=\"\" width=\"700\" height=\"289\" \/><\/p>\n<p style=\"text-align: justify;\">En el cas de qu\u00e8 un element es troba a l\u2019interior d\u2019un altre i els seus marges es fusionen de forma autom\u00e0tica, aix\u00f2 es pot evitar afegint un petit emplenament (<strong>padding<\/strong>) o una vora (<strong>border<\/strong>) a l\u2019element contenidor.<\/p>\n<h1 style=\"text-align: justify;\">Padding<\/h1>\n<p style=\"text-align: justify;\">El CSS defineix quatre propietats per controlar cada un dels espais d\u2019emplenament (o farcit, o \u201crelleno\u201d) horitzontals i verticals d\u2019un element: <strong>padding-top, padding-right, padding-bottom, padding-left.<\/strong><\/p>\n<p style=\"text-align: justify;\">Cada una d\u2019aquestes propietats estableix la separaci\u00f3 entre el contingut i les vores laterals de la caixa de l\u2019element.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-290\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-86.png\" alt=\"\" width=\"495\" height=\"366\" \/><\/p>\n<p style=\"text-align: justify;\">Igual que amb els marges, el CSS tamb\u00e9 defineix una propietat del tipus \u201cshorthand\u201d anomenada <strong>padding<\/strong> per establir els quatre valors de l\u2019emplenament de forma simult\u00e0nia.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Model de caixes CSS El model de caixes o \u201cbox model\u201d \u00e9s segurament la caracter\u00edstica m\u00e9s important del llenguatge de full d\u2019estils CSS, ja que condiciona el disseny de totes les p\u00e0gines web. El model de caixes \u00e9s el comportament de CSS que fa que tots els elements de les p\u00e0gines es representin mitjan\u00e7ant caixes &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abMargin i Padding\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":223,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-272","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Margin i Padding | HTML &amp; CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Margin i Padding | HTML &amp; CSS\" \/>\n<meta property=\"og:description\" content=\"Model de caixes CSS El model de caixes o \u201cbox model\u201d \u00e9s segurament la caracter\u00edstica m\u00e9s important del llenguatge de full d\u2019estils CSS, ja que condiciona el disseny de totes les p\u00e0gines web. El model de caixes \u00e9s el comportament de CSS que fa que tots els elements de les p\u00e0gines es representin mitjan\u00e7ant caixes &hellip; Continua llegint \u00abMargin i Padding\u00bb\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML &amp; CSS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bernatcortina\" \/>\n<meta property=\"og:image\" content=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@bernatcortina\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/\",\"name\":\"Margin i Padding | HTML &amp; CSS\",\"isPartOf\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png\",\"datePublished\":\"2019-01-23T18:14:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#primaryimage\",\"url\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png\",\"contentUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Protegit: CSS\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Margin i Padding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/\",\"name\":\"HTML &amp; CSS\",\"description\":\"Fonaments d&#039;HTML i full d&#039;estils\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Margin i Padding | HTML &amp; CSS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/","og_locale":"ca_ES","og_type":"article","og_title":"Margin i Padding | HTML &amp; CSS","og_description":"Model de caixes CSS El model de caixes o \u201cbox model\u201d \u00e9s segurament la caracter\u00edstica m\u00e9s important del llenguatge de full d\u2019estils CSS, ja que condiciona el disseny de totes les p\u00e0gines web. El model de caixes \u00e9s el comportament de CSS que fa que tots els elements de les p\u00e0gines es representin mitjan\u00e7ant caixes &hellip; Continua llegint \u00abMargin i Padding\u00bb","og_url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/","og_site_name":"HTML &amp; CSS","article_publisher":"https:\/\/www.facebook.com\/bernatcortina","og_image":[{"url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@bernatcortina","twitter_misc":{"Temps estimat de lectura":"6 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/","url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/","name":"Margin i Padding | HTML &amp; CSS","isPartOf":{"@id":"https:\/\/tutorial.bernatcortina.cat\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#primaryimage"},"image":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#primaryimage"},"thumbnailUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png","datePublished":"2019-01-23T18:14:58+00:00","breadcrumb":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#primaryimage","url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png","contentUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.04.05.png"},{"@type":"BreadcrumbList","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/margin-i-padding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/tutorial.bernatcortina.cat\/"},{"@type":"ListItem","position":2,"name":"Protegit: CSS","item":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/"},{"@type":"ListItem","position":3,"name":"Margin i Padding"}]},{"@type":"WebSite","@id":"https:\/\/tutorial.bernatcortina.cat\/#website","url":"https:\/\/tutorial.bernatcortina.cat\/","name":"HTML &amp; CSS","description":"Fonaments d&#039;HTML i full d&#039;estils","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"}]}},"_links":{"self":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":0,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/272\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/223"}],"wp:attachment":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/media?parent=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}