{"id":206,"date":"2021-06-07T11:20:58","date_gmt":"2021-06-07T10:20:58","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=206"},"modified":"2021-06-09T21:13:57","modified_gmt":"2021-06-09T20:13:57","slug":"marginsandcentring","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/css\/css-properties\/marginsandcentring\/","title":{"rendered":"Margins & Centring"},"content":{"rendered":"

\"\"\"\"<\/a>Margins add a transparent area\u00a0outside<\/strong> the border of an element.<\/p>\n

Margins add to the total width and height of an element.<\/p>\n

\"\"<\/a><\/p>\n

Specific Margins<\/h1>\n

Margins for each side can be set separately:<\/p>\n

\r\nh1 {\r\n    margin-top: 10px;\r\n    margin-right: 5px;\r\n    margin-bottom: 10px;\r\n    margin-left: 5px;\r\n}\r\n<\/pre>\n
Margin Shorthand<\/h1>\n
The margin shorthand property can have different numbers of values.<\/p>\n
4 values = top – right – bottom – left<\/p>\n
\r\nh1 { \r\n    margin: 10px 5px 10px 5px;\r\n} \r\n<\/pre>\n
3 values = top – left & right – bottom<\/p>\n
\r\nh1 { \r\n    margin: 10px 5px 10px;\r\n} \r\n<\/pre>\n
2 values = top & bottom – left & right<\/p>\n
\r\nh1 { \r\n    margin: 10px 5px;\r\n} \r\n<\/pre>\n
1 value = top & bottom & left & right<\/p>\n
\r\nh1 { \r\n    margin: 10px;\r\n} \r\n<\/pre>\n
Centring<\/h1>\n
Using a value of “auto” will centre an element inside the browser window, or its containing element<\/p>\n
 \r\nh1 { \r\n    margin: auto; \r\n} <\/pre>\n","protected":false},"excerpt":{"rendered":"
Margins add a transparent area\u00a0outside the border of an element. Margins add to the total width and height of an element. Specific Margins Margins for each side can be set separately: h1 { margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; } Margin Shorthand The margin shorthand property can have different numbers of values. 4 values = top – right – bottom – left h1 { margin: 10px 5px 10px<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":366,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-206","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":7,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/206\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/206\/revisions\/217"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/366"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}