Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Float, margin, padding, ...</title>
- <style>
- .myDiv {
- background-color: coral;
- height: 300px;
- }
- .fl-right {
- float: right;
- }
- .m-p-b {
- background-color: aquamarine;
- font-size: 20px;
- margin: 100px;
- /* margin: 100px 20px;
- margin: 10px 20px 50px 80px;
- margin-right: 50px; */
- padding: 50px;
- border: 5px dotted red;
- }
- table, th, td {
- margin-left: auto;
- margin-right: auto;
- border: 3px solid green;
- }
- .layout {
- display: flex;
- justify-content: center;
- }
- </style>
- </head>
- <body>
- <div class="myDiv">
- <img src="https://files.worldwildlife.org/wwfcmsprod/images/African_Elephant_Kenya_112367/story_full_width/qxyqxqjtu_WW187785.jpg" alt="elephant" height="300px" class="fl-right">
- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo aperiam consequuntur dolor id consequatur sunt dolore. Cupiditate vitae minus impedit!</p>
- </div>
- <div class="m-p-b">
- <h3>Margin</h3>
- <p>Space outside of the border of the element.</p>
- <h3>Padding</h3>
- <p>Space between border and content of the element.</p>
- <h3>Border</h3>
- <p>Just a line between padding and margin.</p>
- </div>
- <table>
- <tr>
- <th>Person 1</th>
- <th>Person 2</th>
- <th>Person 3</th>
- </tr>
- <tr>
- <td>John</td>
- <td>Anne</td>
- <td>Josh</td>
- </tr>
- <tr>
- <td>16</td>
- <td>20</td>
- <td>18</td>
- </tr>
- </table>
- <!-- Unordered list -->
- <ul type="square">
- <li>T-shirt</li>
- <li>Socks</li>
- <li>Jacket</li>
- </ul>
- <!-- Ordered list -->
- <ol type="A">
- <li>T-shirt</li>
- <li>Socks</li>
- <li>Jacket</li>
- </ol>
- <!-- Embedding video -->
- <iframe width="560" height="315" src="https://www.youtube.com/embed/7NiYVoqBt-8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- <div class="layout">
- <p>Lorem ipsum dolor sit amet.</p>
- <p>Lorem ipsum dolor sit amet.</p>
- <p>Lorem ipsum dolor sit amet.</p>
- <p>Lorem ipsum dolor sit amet.</p>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement