Scribd Logo
Upload

Welcome to Scribd!

  • 20BEC111 WT Practical7

    Uploaded by

    Dhruv Prajapati
    1 views3 pages

    Original Title

    20BEC111_WT_Practical7

    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
    1 views3 pages

    20BEC111 WT Practical7

    Uploaded by

    Dhruv Prajapati

    Copyright:

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

    Department of Electronics and Communications

    Engineering Institute of Technology, Nirma University


    2CSOE77 Web technologies
    20BEC111 - Harshesh Shah

    Practical 7

    Demonstrate Margin, Padding and Outline properties in CSS.


    html
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div class="box margin-box">
    <p>20px margin</p>
    </div>

    <div class="box padding-box">


    <p>15px padding inside</p>
    </div>

    <div class="box outline-box">


    <p>2px red outline</p>
    </div>
    </body>
    </html>

    css
    body{

    background-color: black;
    }

    .box {

    width: 200px;

    height: 100px;

    text-align: center;

    font-size: 16px;

    line-height: 100px;

    .margin-box {

    background-color: #3498db;

    margin: 20px;

    .padding-box {

    background-color: #e67e22;

    padding: 15px;

    .outline-box {

    background-color: #2ecc71;

    outline: 2px solid #e74c3c;

    }
    output

    Conclusion:

    In this experiment, I learned about Margin, Padding and Outline properties in CSS and
    demonstrated its working on basic HTML.

    You might also like