{"id":310,"date":"2014-07-17T15:47:43","date_gmt":"2014-07-17T12:47:43","guid":{"rendered":"http:\/\/mednis.info\/wp\/?p=310"},"modified":"2014-07-17T15:54:21","modified_gmt":"2014-07-17T12:54:21","slug":"css-100-width-minus-paddings-margins-and-border","status":"publish","type":"post","link":"http:\/\/mednis.info\/wp\/?p=310","title":{"rendered":"CSS 100% width minus paddings, margins and border"},"content":{"rendered":"<pre>\r\nimg{\r\n\twidth: 100%;\r\n\tbackground-color: #fff;\r\n\tbox-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);\r\n\tborder: thin solid #ccc;\r\n\tpadding: 10px;\r\n}\r\n<\/pre>\n<p>The code above gives this result:<br \/>\n<a href=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_no.jpg\"><img loading=\"lazy\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_no.jpg\" alt=\"2014-07-17_css_box_model_no\" width=\"829\" height=\"737\" class=\"alignnone size-full wp-image-315\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_no.jpg 829w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_no-300x266.jpg 300w\" sizes=\"(max-width: 829px) 100vw, 829px\" \/><\/a><\/p>\n<p>As you can see, the 100% width plus 10px padding exceeds the actual available width, so here is the correct code how it should be:<\/p>\n<pre>\r\nimg{\r\n\t-webkit-box-sizing: border-box; \/* Safari\/Chrome, other WebKit *\/\r\n\t-moz-box-sizing: border-box;    \/* Firefox, other Gecko *\/\r\n\tbox-sizing: border-box;         \/* Opera\/IE 8+ *\/\r\n\twidth: 100%;\r\n\tbackground-color: #fff;\r\n\tbox-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);\r\n\tborder: thin solid #ccc;\r\n\tpadding: 10px;\r\n}\r\n<\/pre>\n<p><a href=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_yes.jpg\"><img loading=\"lazy\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_yes.jpg\" alt=\"2014-07-17_css_box_model_yes\" width=\"799\" height=\"724\" class=\"alignnone size-full wp-image-314\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_yes.jpg 799w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/07\/2014-07-17_css_box_model_yes-300x271.jpg 300w\" sizes=\"(max-width: 799px) 100vw, 799px\" \/><\/a><br \/>\nIn this example the image with its paddings, margins and border fits inside the available container and 100% is not exceeding it.<\/p>\n<p>More on this topic: http:\/\/css-tricks.com\/box-sizing\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>img{ width: 100%; background-color: #fff; box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8); border: thin solid #ccc; padding: 10px; } The code above gives this result: As you can see, the 100% width plus 10px padding exceeds the actual available width, so here is the correct code how it should be: img{ -webkit-box-sizing: border-box; &hellip; <a href=\"http:\/\/mednis.info\/wp\/?p=310\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">CSS 100% width minus paddings, margins and border<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,13],"tags":[],"_links":{"self":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts\/310"}],"collection":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=310"}],"version-history":[{"count":6,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts\/310\/revisions"}],"predecessor-version":[{"id":319,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts\/310\/revisions\/319"}],"wp:attachment":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=310"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}