Scribd Logo
Upload

Welcome to Scribd!

  • CSS Box Model

    Uploaded by

    Lukman Hakim
    14 views2 pages

    Original Title

    CSS Box Model.docx

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views2 pages

    CSS Box Model

    Uploaded by

    Lukman Hakim

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    CSS Box Model

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
    }
    </style>
    </head>
    <body>

    <h2>Demonstrating the Box Model</h2>

    <p>The CSS box model is essentially a box that wraps around every HTML
    element. It consists of: borders, padding, margins, and the actual content.</p>

    <div>This text is the actual content of the box. We have added a 25px padding,
    25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum.</div>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
    }
    </style>
    </head>
    <body>

    <h2>Calculate the total width:</h2>

    <img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">


    <div>The picture above is 350px wide. The total width of this element is also
    350px.</div>

    </body>
    </html>

    You might also like