Content Size Example

\\n

This element demonstrates how the content area can be controlled using width, max-width, and min-height.

\\n

The box expands to fill available space but will not exceed 500px in width.

\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"1536px","height":"413px"},"children":[]},{"id":"0c93b883-ac45-4e1b-9412-2653ba6923d1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"2. Padding","styles":{}}],"children":[]},{"id":"bfce11a0-dab3-422c-acd4-61c66de092aa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Padding is the space between the content and the border.","styles":{}}],"children":[]},{"id":"04c7b673-9df3-41d4-aac4-2695e094f5c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It creates internal spacing so the content does not touch the border.","styles":{}}],"children":[]},{"id":"3184458f-7b95-49e3-a8cf-c10b4fc3e468","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Padding properties:","styles":{}}],"children":[]},{"id":"9cf2238c-ecf5-4eb9-870b-7e5fc231944b","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Property","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"padding","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Applies padding to all sides","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"padding-top","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Top padding","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"padding-right","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Right padding","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"padding-bottom","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Bottom padding","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"padding-left","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Left padding","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"d446cfad-a97d-4980-99ff-78746d5d8dbe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"e4688ec0-3973-4c3f-b0ac-47c8caf58119","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nPadding Example\\n\\n\\n\\n\\n\\n\\n

\\n This text has 20px space between the content and the border.\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"1536px","height":"551px"},"children":[]},{"id":"e179d2e3-ffb5-4d64-a567-0a8588c519bb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shorthand example:","styles":{}}],"children":[]},{"id":"455c681b-e99c-43f4-a2ef-bb54a474e34b","type":"procode","props":{"code":"padding: 10px 20px;","language":"html","filename":"","files":"[{\"id\":\"4hm3f78lo\",\"name\":\"code\",\"code\":\"padding: 10px 20px;\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e4abdfca-35f3-431b-a767-a8979eb0b09b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"fd4c36d0-f87a-4435-97e9-5aefd896c025","type":"procode","props":{"code":"top and bottom = 10px\nleft and right = 20px","language":"html","filename":"","files":"[{\"id\":\"sge30ace0\",\"name\":\"code\",\"code\":\"top and bottom = 10px\\nleft and right = 20px\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3100c8c3-33c1-4987-ad94-6d55a9087798","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"3. Border","styles":{}}],"children":[]},{"id":"c97df875-cbbf-4e7a-8b7e-3fb5163e05a5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The border surrounds the padding and content and represents the visible edge of the element.","styles":{}}],"children":[]},{"id":"5edd7fad-bf7e-41da-b0aa-7ef23bb8dae9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Border properties:","styles":{}}],"children":[]},{"id":"70d471d5-63d1-45f8-bd2b-b477a14f7c91","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Property","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"border-width","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Thickness of the border","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"border-style","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Style of the border","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"border-color","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Color of the border","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"25ab2247-fa1d-4467-8e11-337041bfdeb3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"9bb74688-4c7d-4a7c-a213-a282e1fdc8dc","type":"sandpack","props":{"files":"[{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nBorder Example\\n\\n\\n\\n\\n\\n\\n

\\n This element has a border around it.\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"a8667d1f-6b73-4556-ba20-84f756ff44a4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"sorthand border:","styles":{}}],"children":[]},{"id":"5112354d-00ce-493a-a038-5cfdb391e3e6","type":"procode","props":{"code":".box {\n border: 2px solid black;\n}","language":"html","filename":"","files":"[{\"id\":\"8lk2uk6l6\",\"name\":\"code\",\"code\":\".box {\\n border: 2px solid black;\\n}\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e8474ce-74d9-41ce-889d-54182e6d8c47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common border styles include:","styles":{}}],"children":[]},{"id":"624f9a91-f440-4fef-a94a-77acff48ba4b","type":"procode","props":{"code":"solid\ndashed\ndotted\ndouble","language":"html","filename":"","files":"[{\"id\":\"nu99dqqbu\",\"name\":\"code\",\"code\":\"solid\\ndashed\\ndotted\\ndouble\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"03e15c60-f287-4a70-84cd-141540ea1e70","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"4. Margin","styles":{}}],"children":[]},{"id":"f8babc06-1eb0-4431-88b7-ead29de0b96f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Margin is the space outside the border.","styles":{}}],"children":[]},{"id":"cc4eabdf-4ddc-429e-8130-85a24be0caf2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It controls the distance between the element and other elements.","styles":{}}],"children":[]},{"id":"03f9f481-e163-4607-b418-388a1199b95c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Margin properties:","styles":{}}],"children":[]},{"id":"ca806bac-cc44-4ba4-94ff-e459dee6bf46","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Property","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"margin","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Applies margin to all sides","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"margin-top","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Top margin","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"margin-right","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Right margin","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"margin-bottom","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Bottom margin","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"margin-left","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Left margin","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"edbbc555-5dee-43df-98fe-b087227dc898","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"5768dc2b-6b8d-48dc-9145-8fcefe462d37","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1f09482a-aef6-4ec4-82e5-e75e902a2e72","type":"sandpack","props":{"files":"[{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nMargin Example\\n\\n\\n\\n\\n\\n\\n

\\n This box has a margin of 40px around it.\\n

\\n\\n

\\n This is another box. The margin creates space between them.\\n