{"id":1743,"date":"2011-07-25T11:30:32","date_gmt":"2011-07-25T09:30:32","guid":{"rendered":"http:\/\/www.simonedesign.it\/blog\/?p=1743"},"modified":"2011-07-25T11:40:27","modified_gmt":"2011-07-25T09:40:27","slug":"css3-box-sizing","status":"publish","type":"post","link":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/","title":{"rendered":"CSS3 Box Sizing: gestione delle grandezze"},"content":{"rendered":"<div pw:image='' class='pw-widget pw-counter-horizontal pw-horizontal' pw:url=\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/\" pw:title=\"CSS3 Box Sizing: gestione delle grandezze\" >\n<\/div><p><a href=\"http:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg\" alt=\"\" title=\"CSS3 box sizing\" width=\"500\" height=\"400\" class=\"alignnone size-full wp-image-1746\" srcset=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg 500w, https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing-300x240.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Continua la rubrica mensile <strong><a title=\"CSS3\" href=\"http:\/\/www.simonedesign.it\/blog\/tag\/css3\/\">Propriet\u00e0 CSS3<\/a><\/strong>, dedicata alle ultime novit\u00e0 sulle nuove propriet\u00e0 dei CSS3.<\/p>\n<p>La propriet\u00e0 CSS3 di oggi \u00e8: <strong>Box Sizing<\/strong>, grazie alla quale si possono gestire in modo ottimale le grandezze dei box sia in altezza (height) che il larghezza (width) rispetto al contesto.<\/p>\n<p><!--more-->Di default le grandezze width e height di un contenitore non tengono in considerazione alcuni elementi come il margin, il padding e i bordi.<\/p>\n<p>In pratica un div con le seguenti caratteristiche:<\/p>\n<pre lang=\"css\">\r\ndiv {\r\n      width: 100px;\r\n      padding: 20px;\r\n      border: 2px solid #000;\r\n}\r\n<\/pre>\n<p>Non sar\u00e0 largo realmente 100px, poich\u00e8 a quei pixel vanno aggiunti 40px del padding (20px a destra e 20px a sinistra) e 4px del bordo (2px a destra e 2px a sinistra), per un totale di 144px.<\/p>\n<p>Non sarebbe pi\u00f9 semplice settare una larghezza alla quale le altre propriet\u00e0 devono attenersi per non avere incongruenze?<\/p>\n<p>Proprio a questo scopo viene in nostro soccorso la propriet\u00e0 box-sizing che possiede due valori:<br \/>\n<strong>content-box<\/strong>: il valore predefinito di questa propriet\u00e0, non tiene in considerazione gli altri elementi quali bordi e margini.<br \/>\n<strong>border-box<\/strong>: questo \u00e8 il valore focale di questo articolo, con il quale la larghezza di un box \u00e8 riferita in tutta la sua interezza, compresa di padding, margin e bordi.<\/p>\n<p>La sintassi di questa seconda propriet\u00e0 \u00e8 la seguente:<\/p>\n<pre lang=\"css\">\r\ndiv {\r\n      width: 570px;\r\n      padding: 20px;\r\n      border: 2px solid #000;\r\n      -moz-box-sizing: border-box;\r\n      -webkit-box-sizing: border-box;\r\n      box-sizing: border-box;\r\n}\r\n<\/pre>\n<p>Ecco come si presenta:<\/p>\n<div style=\"background-color: #DFEBFF; width: 500px; padding: 20px; border: 2px solid #000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;\">Questo div ha la propriet\u00e0 box-sizing settata su border-box<\/div>\n<p>&nbsp;<\/p>\n<p>Se non avessi specificato la propriet\u00e0 box-sizing:border-box la visualizzazione sarebbe stata la seguente:<\/p>\n<div style=\"background-color: #DFEBFF; width: 500px; padding: 20px; border: 2px solid #000;\">In questo div non ho specificato la propriet\u00e0 box-sizing<\/div>\n<p>&nbsp;<\/p>\n<p>In questo modo la larghezza del div comprender\u00e0 sia il padding che il border, essendo sempre di 100px in larghezza. Questa propriet\u00e0 semplifica di molto le operazioni di addizione di ogni propriet\u00e0 attorno al box che andrebbero svolte in caso di mancanza del valore border-box, per una corretta visualizzazione degli elementi relativamente al contesto.<\/p>\n<h4>Compatibilit\u00e0 dei browser<\/h4>\n<p>Internet Explorer 9<br \/>\nGoogle Chrome<br \/>\nOpera 7.0<br \/>\nFirefox 1.0+ con il prefisso -moz-<br \/>\nSafari 3.0+ con il prefisso -webkit-<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continua la rubrica mensile Propriet\u00e0 CSS3, dedicata alle ultime novit\u00e0 sulle nuove propriet\u00e0 dei CSS3. La propriet\u00e0 CSS3 di oggi \u00e8: Box Sizing, grazie alla quale si possono gestire in modo ottimale le grandezze dei box sia in altezza (height) che il larghezza (width) rispetto al contesto.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[58],"class_list":["post-1743","post","type-post","status-publish","format-standard","hentry","category-css","tag-css3"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3 Box Sizing: gestione delle grandezze | Blog | SimoneDesign<\/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:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Box Sizing: gestione delle grandezze | Blog | SimoneDesign\" \/>\n<meta property=\"og:description\" content=\"Continua la rubrica mensile Propriet\u00e0 CSS3, dedicata alle ultime novit\u00e0 sulle nuove propriet\u00e0 dei CSS3. La propriet\u00e0 CSS3 di oggi \u00e8: Box Sizing, grazie alla quale si possono gestire in modo ottimale le grandezze dei box sia in altezza (height) che il larghezza (width) rispetto al contesto.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | SimoneDesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SimoneDesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-07-25T09:30:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-07-25T09:40:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Simone Forti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:site\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simone Forti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/\",\"name\":\"CSS3 Box Sizing: gestione delle grandezze | Blog | SimoneDesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg\",\"datePublished\":\"2011-07-25T09:30:32+00:00\",\"dateModified\":\"2011-07-25T09:40:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#primaryimage\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg\",\"contentUrl\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg\",\"width\":\"500\",\"height\":\"400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.simonedesign.it\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Box Sizing: gestione delle grandezze\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/\",\"name\":\"Blog | SimoneDesign\",\"description\":\"Web Marketing e non solo..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\",\"name\":\"Simone Forti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"caption\":\"Simone Forti\"},\"sameAs\":[\"http:\/\/www.simonedesign.it\/\"],\"url\":\"https:\/\/www.simonedesign.it\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Box Sizing: gestione delle grandezze | Blog | SimoneDesign","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:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/","og_locale":"it_IT","og_type":"article","og_title":"CSS3 Box Sizing: gestione delle grandezze | Blog | SimoneDesign","og_description":"Continua la rubrica mensile Propriet\u00e0 CSS3, dedicata alle ultime novit\u00e0 sulle nuove propriet\u00e0 dei CSS3. La propriet\u00e0 CSS3 di oggi \u00e8: Box Sizing, grazie alla quale si possono gestire in modo ottimale le grandezze dei box sia in altezza (height) che il larghezza (width) rispetto al contesto.","og_url":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/","og_site_name":"Blog | SimoneDesign","article_publisher":"https:\/\/www.facebook.com\/SimoneDesign\/","article_published_time":"2011-07-25T09:30:32+00:00","article_modified_time":"2011-07-25T09:40:27+00:00","og_image":[{"width":500,"height":400,"url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg","type":"image\/jpeg"}],"author":"Simone Forti","twitter_card":"summary_large_image","twitter_creator":"@SimoneDesign_","twitter_site":"@SimoneDesign_","twitter_misc":{"Scritto da":"Simone Forti","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/","url":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/","name":"CSS3 Box Sizing: gestione delle grandezze | Blog | SimoneDesign","isPartOf":{"@id":"https:\/\/www.simonedesign.it\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#primaryimage"},"image":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#primaryimage"},"thumbnailUrl":"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg","datePublished":"2011-07-25T09:30:32+00:00","dateModified":"2011-07-25T09:40:27+00:00","author":{"@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d"},"breadcrumb":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#primaryimage","url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg","contentUrl":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/07\/CSS3-box-sizing.jpg","width":"500","height":"400"},{"@type":"BreadcrumbList","@id":"https:\/\/www.simonedesign.it\/blog\/css3-box-sizing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.simonedesign.it\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 Box Sizing: gestione delle grandezze"}]},{"@type":"WebSite","@id":"https:\/\/www.simonedesign.it\/blog\/#website","url":"https:\/\/www.simonedesign.it\/blog\/","name":"Blog | SimoneDesign","description":"Web Marketing e non solo..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d","name":"Simone Forti","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","caption":"Simone Forti"},"sameAs":["http:\/\/www.simonedesign.it\/"],"url":"https:\/\/www.simonedesign.it\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/1743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/comments?post=1743"}],"version-history":[{"count":17,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/1743\/revisions"}],"predecessor-version":[{"id":1766,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/1743\/revisions\/1766"}],"wp:attachment":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/media?parent=1743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/categories?post=1743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/tags?post=1743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}