{"id":12759,"date":"2021-12-04T19:03:31","date_gmt":"2021-12-04T19:03:31","guid":{"rendered":"http:\/\/blog.bachi.net\/?p=12759"},"modified":"2021-12-06T19:49:16","modified_gmt":"2021-12-06T19:49:16","slug":"css-cheatsheet","status":"publish","type":"post","link":"https:\/\/blog.bachi.net\/?p=12759","title":{"rendered":"CSS Cheatsheet"},"content":{"rendered":"

<\/p>\n

Collapsed Margins<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset="utf-8">\r\n    <link rel="stylesheet" type="text\/css" href="styles.css">\r\n<\/head>\r\n<body>\r\n    <div class="flexbox">\r\n        <div class="flexelement">Box 1<\/div>\r\n        <div class="flexelement">Box 2<\/div>\r\n        <div class="flexelement">Box 3<\/div>\r\n        <div class="flexelement">Box 4<\/div>\r\n        <div class="flexelement">Box 5<\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\r\nhtml {\r\n    background: #afafaf;\r\n}\r\n\r\n.flexbox\r\n{\r\n    width: 90%;\r\n    margin: 5%;\r\n    background: #dadada;\r\n}\r\n\r\n.flexelement\r\n{\r\n    background: #ff6600;\r\n    color: #ffffff;\r\n    text-align: center;\r\n    margin: 10px;\r\n    padding: 15px 0 15px 0;\r\n}\r\n<\/pre>\n\n\n
\"\"<\/a><\/td>\n<\/tr>\n<\/table>\n
Why does this CSS margin-top style not work?<\/a><\/p>\n
<\/p>\n
Float left<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset="utf-8">\r\n    <link rel="stylesheet" type="text\/css" href="styles.css">\r\n<\/head>\r\n<body>\r\n    <div class="flexbox">\r\n        <div class="flexelement">Box 1<\/div>\r\n        <div class="flexelement">Box 2<\/div>\r\n        <div class="flexelement">Box 3<\/div>\r\n        <div class="flexelement">Box 4<\/div>\r\n        <div class="flexelement">Box 5<\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\r\nhtml {\r\n    background: #afafaf;\r\n}\r\n\r\n.flexbox\r\n{\r\n    width: 90%;\r\n    margin: 5%;\r\n    background: #dadada;\r\n}\r\n\r\n.flexelement\r\n{\r\n    background: #ff6600;\r\n    color: #ffffff;\r\n    text-align: center;\r\n    margin: 10px;\r\n    padding: 15px;\r\n    float: left;\r\n}\r\n<\/pre>\n