{"id":575,"date":"2010-01-26T11:17:52","date_gmt":"2010-01-26T11:17:52","guid":{"rendered":"http:\/\/www.codingfriends.com\/?p=575"},"modified":"2010-01-26T11:18:42","modified_gmt":"2010-01-26T11:18:42","slug":"box-model","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2010\/01\/26\/box-model\/","title":{"rendered":"Box model"},"content":{"rendered":"

Introduction<\/h3>\n

The box model within HTML is how the content and the area around it is defined. There is the content itself, paddings, border and margin’s. Each one can be altered and also each part of the top,bottom,left and right.<\/p>\n

Image of the box model<\/h3>\n
\"box<\/a>
box model in HTML<\/figcaption><\/figure>\n

Green : content
\nBlue : padding
\nred : border
\nyellow : margin<\/p>\n

How to alter the each aspect of the model<\/h3>\n

To alter the margin for example you just need to define the actual HTML object that you want to “talk” to, so lets define that first.<\/p>\n

\r\n
\r\nhi there this is the content\r\n<\/div>\r\n<\/pre>\n
and then to talk to the HTML object you just select it ( if was a class then you use “.” or if it was a id then use “#”, the way that I remember is that “.” is like class method call in c++\/java\/c# etc and “#” is what you could call a variable).<\/p>\n
\r\n#alterhere \r\n{\r\nmargin : 20px;\r\n}\r\n<\/pre>\n
means to have a full margin of 20px (pixels) but to pull out just the left part to be bigger then <\/p>\n
\r\n#alterhere\r\n{\r\nmargin-left : 50px;\r\n}\r\n<\/pre>\n
so the margin left will now be 50px instead of 20px.  You can do the same for padding as well, padding-left, padding-right, padding-top, padding-bottom.<\/p>\n
Conclusion<\/h3>\n
The box model is very nice and also allows you to fully control the content and the box around it.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction The box model within HTML is how the content and the area around it is defined. There is the content itself, paddings, border and margin’s. Each one can be altered and also each part of the top,bottom,left and right. Image of the box model Green : content Blue : padding red : border yellow … Continue reading Box model<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[70],"class_list":["post-575","post","type-post","status-publish","format-standard","hentry","category-html","tag-box-model"],"_links":{"self":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/comments?post=575"}],"version-history":[{"count":3,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/575\/revisions"}],"predecessor-version":[{"id":579,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/575\/revisions\/579"}],"wp:attachment":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/media?parent=575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/categories?post=575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/tags?post=575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}