forked from mdn/css-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
margin, borders, padding, positioning and floats examples for guides.
- Loading branch information
1 parent
85ca8d2
commit 5c294a3
Showing
6 changed files
with
606 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Border Properties</title> | ||
| <link rel="stylesheet" href="../css-cookbook/styles.css"> | ||
| <style> | ||
|
|
||
| .container { | ||
| display: flex; | ||
| } | ||
| .box { | ||
| border-radius: 5px; | ||
| background-color: rgba(96, 139, 168, .2); | ||
| margin: 10px; | ||
| width: 220px; | ||
| height:220px; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <style class="editable"> | ||
| .box { | ||
| writing-mode: horizontal-tb; | ||
| direction: ltr; | ||
| } | ||
|
|
||
| .physical { | ||
| border-top: 2px solid hotpink; | ||
| border-right-style: dotted; | ||
| border-right-color: goldenrod; | ||
| border-right-width: 5px; | ||
| border-bottom: 4px double black; | ||
| border-left: none; | ||
| } | ||
|
|
||
| .logical { | ||
| border-block-start: 2px solid hotpink; | ||
| border-inline-end-style: dotted; | ||
| border-inline-end-color: goldenrod; | ||
| border-inline-end-width: 5px; | ||
| border-block-end: 4px double black; | ||
| border-inline-start: none; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <div class="container"> | ||
| <div class="physical box"> | ||
| Borders use physical properties. | ||
| </div> | ||
|
|
||
| <div class="logical box"> | ||
| Borders use logical properties. | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 30px;"> | ||
| .box { | ||
| writing-mode: horizontal-tb; | ||
| direction: ltr; | ||
| } | ||
|
|
||
| .physical { | ||
| border-top: 2px solid hotpink; | ||
| border-right-style: dotted; | ||
| border-right-color: goldenrod; | ||
| border-right-width: 5px; | ||
| border-bottom: 4px double black; | ||
| border-left: none; | ||
| } | ||
|
|
||
| .logical { | ||
| border-block-start: 2px solid hotpink; | ||
| border-inline-end-style: dotted; | ||
| border-inline-end-color: goldenrod; | ||
| border-inline-end-width: 5px; | ||
| border-block-end: 4px double black; | ||
| border-inline-start: none; | ||
| }</textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 180px;"> | ||
| <div class="container"> | ||
| <div class="physical box"> | ||
| Borders use physical properties. | ||
| </div> | ||
|
|
||
| <div class="logical box"> | ||
| Borders use logical properties. | ||
| </div> | ||
| </div> | ||
| </textarea> | ||
|
|
||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset"> | ||
| </div> | ||
| </body> | ||
| <script src="../css-cookbook/playable.js"></script> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>logical values for float</title> | ||
| <link rel="stylesheet" href="../css-cookbook/styles.css"> | ||
| <style> | ||
|
|
||
| .container { | ||
| display: flex; | ||
| } | ||
|
|
||
| .box { | ||
| border: 2px solid rgb(96, 139, 168); | ||
| border-radius: 5px; | ||
| background-color: rgba(96, 139, 168, .2); | ||
| padding: 10px; | ||
| margin: 10px; | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
|
|
||
|
|
||
| </style> | ||
|
|
||
| <style class="editable"> | ||
| .inner { | ||
| writing-mode: horizontal-tb; | ||
| } | ||
|
|
||
| .physical { | ||
| float: left; | ||
| } | ||
|
|
||
| .logical { | ||
| float: inline-start; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <div class="container"> | ||
| <div class="inner"> | ||
| <div class="physical box"></div> | ||
| Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach | ||
| avocado daikon napa cabbage asparagus winter purslane kale. | ||
| <div class="inner"> | ||
| <div class="logical box"></div> | ||
| Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water | ||
| spinach | ||
| avocado daikon napa cabbage asparagus winter purslane kale. | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 240px;"> | ||
| .inner { | ||
| writing-mode: horizontal-tb; | ||
| } | ||
|
|
||
| .physical { | ||
| float: left; | ||
| } | ||
|
|
||
| .logical { | ||
| float: inline-start; | ||
| }</textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 180px;"> | ||
| <div class="container"> | ||
| <div class="inner"> | ||
| <div class="physical box"></div> | ||
| Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. | ||
| </div> | ||
| <div class="inner"> | ||
| <div class="logical box"></div> | ||
| Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. | ||
| </div> | ||
| </div> | ||
| </textarea> | ||
|
|
||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset"> | ||
| </div> | ||
| </body> | ||
| <script src="../css-cookbook/playable.js"></script> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Margin Longhands</title> | ||
| <link rel="stylesheet" href="../css-cookbook/styles.css"> | ||
| <style> | ||
|
|
||
| .container { | ||
| display: flex; | ||
| } | ||
| .inner { | ||
| border: 2px dotted grey; | ||
| } | ||
| .box { | ||
| border: 2px solid rgb(96, 139, 168); | ||
| border-radius: 5px; | ||
| background-color: rgba(96, 139, 168, .2); | ||
| padding: 10px; | ||
| width: 220px; | ||
| height:220px; | ||
| } | ||
|
|
||
|
|
||
| </style> | ||
|
|
||
| <style class="editable"> | ||
| .box { | ||
| writing-mode: horizontal-tb; | ||
| direction: ltr; | ||
| } | ||
|
|
||
| .physical { | ||
| margin-top: 5px; | ||
| margin-right: 0; | ||
| margin-bottom: 2em; | ||
| margin-left: 50px; | ||
| } | ||
|
|
||
| .logical { | ||
| margin-block-start: 5px; | ||
| margin-inline-end: 0; | ||
| margin-block-end: 2em; | ||
| margin-inline-start: 50px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <div class="container"> | ||
| <div class="inner"> | ||
| <div class="physical box"> | ||
| margin-top: 5px<br> | ||
| margin-right: 0<br> | ||
| margin-bottom: 2em<br> | ||
| margin-left: 50px | ||
| </div> | ||
| </div> | ||
| <div class="inner"> | ||
| <div class="logical box"> | ||
| margin-block-start: 5px<br> | ||
| margin-inline-end: 0<br> | ||
| margin-block-end: 2em<br> | ||
| margin-inline-start: 50px | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 320px;"> | ||
| .box { | ||
| writing-mode: horizontal-tb; | ||
| direction: ltr; | ||
| } | ||
|
|
||
| .physical { | ||
| margin-top: 5px; | ||
| margin-right: 0; | ||
| margin-bottom: 2em; | ||
| margin-left: 50px; | ||
| } | ||
|
|
||
| .logical { | ||
| margin-block-start: 5px; | ||
| margin-inline-end: 0; | ||
| margin-block-end: 2em; | ||
| margin-inline-start: 50px; | ||
| }</textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 340px;"> | ||
| <div class="container"> | ||
| <div class="inner"> | ||
| <div class="physical box"> | ||
| margin-top: 5px<br> | ||
| margin-right: 0<br> | ||
| margin-bottom: 2em<br> | ||
| margin-left: 50px | ||
| </div> | ||
| </div> | ||
| <div class="inner"> | ||
| <div class="logical box"> | ||
| margin-block-start: 5px<br> | ||
| margin-inline-end: 0<br> | ||
| margin-block-end: 2em<br> | ||
| margin-inline-start: 50px | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </textarea> | ||
|
|
||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset"> | ||
| </div> | ||
| </body> | ||
| <script src="../css-cookbook/playable.js"></script> | ||
|
|
||
| </html> |
Oops, something went wrong.