Scribd Logo
Upload

Welcome to Scribd!

  • CSS Margine

    Uploaded by

    Subhadeep Panda
    17 views8 pages
    The document discusses the CSS margin and padding properties. Margin creates space around an element, while padding creates space between an element's content and border. Margin and padding can be set with one, two, three, or four values to control spacing on individual sides of an element. Examples are provided to demonstrate how to uniformly or individually set margin and padding values.

    Original Description:

    Original Title

    CSS_margine-converted

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses the CSS margin and padding properties. Margin creates space around an element, while padding creates space between an element's content and border. Margin and padding can be set with one, two, three, or four values to control spacing on individual sides of an element. Examples are provided to demonstrate how to uniformly or individually set margin and padding values.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views8 pages

    CSS Margine

    Uploaded by

    Subhadeep Panda
    The document discusses the CSS margin and padding properties. Margin creates space around an element, while padding creates space between an element's content and border. Margin and padding can be set with one, two, three, or four values to control spacing on individual sides of an element. Examples are provided to demonstrate how to uniformly or individually set margin and padding values.

    Copyright:

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

    CSS – Margin & Padding Property

    abckkjkjkjkjjjkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkk

    Margin of Element

    Border of Element

    Padding of Element

    Content of Element

    CSS- Margin

    The CSS margin properties are used to create margin around four sides of the
    specified element.

    Selector {margin : value;}


    Unit of value may be pixel, %.
    • When we specify margin property with single value in the style rule then it
    makes uniform space around the four sides.
    Source Code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1
    { border : 10px solid red;
    margin : 10px; }
    h2
    { border : 10px solid red;
    margin : 30px; }
    p
    1
    { border : 10px solid red;
    margin : 60px; }
    </style>
    </head>
    <body>
    <h1>Margin Style 10px</h1>
    <p>Margin Style 20px</p>
    <h2>Margin Style 40px</h1>
    </body>
    </html>
    Output :

    Note :
    In above example there is three style rules defined in three selectors, respectively
    h1, h2 and p. Style rule of h1 defined margin width 10px , h2 defined 30px and p
    selector 60px for four sides.

    • When we specify margin property with four values in the style rule then it
    makes four different margin space around the four sides.

    Selector {margin : top right bottom left;}


    Source Code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1
    { border : 10px solid red;
    2
    margin : 10px 20px 30px 40px; }
    </style>
    </head>
    <body>
    <h1>Margin Style Top Margin = 10px Right Margin = 20px Bottom Margin =
    30px left margin 40px
    </h1>
    <hr>
    <h1>Margin Style Top Margin = 10px Right Margin = 20px Bottom Margin =
    30px left margin 40px
    </h1></body></html>

    Output :

    Note :
    In above example the style rule defined four different margin width for four sides.

    • We can specifies any one side of margin using margin-left / margin-right /


    margin-top / margin-bottom.

    Selector { Margin-left : pixel / %;}


    Selector { Margin-right : pixel / %;}
    Selector { Margin-top : pixel / %;}
    Selector { Margin-bottom : pixel / %;}

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1
    { border : 10px solid red;
    3
    margin-left : 30px;
    margin-top :20px; }
    h2
    { border : 10px solid red;
    margin-right : 40px;
    margin-bottom :20px; }
    </style>
    </head>
    <body>
    <h1>Margin Style Margin-left = 10px Margin-top = 20px </h1>
    <hr>
    <h2>Margin Style Margin-right = 10px Margin-bottom = 20px </h2>
    </body></html>
    Output :

    CSS – Padding Property


    The CSS padding properties are used to generate space between an element's
    content and defined borders.

    Syntax :
    Selector {padding : value;}
    Unit of value may be pixel, %.

    • When we specify padding property with single value in the style rule then it
    makes uniform space around the four sides of contents.

    4
    Source Code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1
    { border : 5px solid red;
    margin : 10px;
    padding : 40px; }
    </style>
    </head>
    <body>
    <h1> COVID-19
    In 2019, the Centres for Disease Control and Prevention (CDC) started
    monitoring the outbreak of a new corona virus, SARS-CoV-2, which causes the
    respiratory illness now known as COVID-19. Authorities first identified the virus
    in Wuhan, China.
    Since then, the virus has spread to other countries, both in and outside Asia,
    leading the World Health Organization (WHO) to declare this as a pandemic.
    </h1>
    </html>

    Output :

    5
    • We can specifies any one side of padding using padding-left / padding-right /
    padding-top / padding-bottom.

    Syntax :
    Selector { padding-left : pixel / %;}
    Selector { padding-right : pixel / %;}
    Selector { padding-top : pixel / %;}
    Selector { padding-bottom : pixel / %;}

    Source Code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #pd1
    { border : 5px solid red;
    margin : 10px;
    padding : 40px; }
    #pd2
    { border : 5px solid red;
    margin : 10px;
    padding-left : 40px;
    padding-right : 40px;
    padding-top : 30px;
    padding-bottom : 30px; }
    #pd2
    { border : 5px solid red;
    margin : 10px;
    padding-left : 40px;
    padding-right : 40px;
    padding-top : 30px;
    padding-bottom : 30px; }
    #pd3
    { border : 5px solid red;
    margin : 10px;
    padding : 20px 40px;
    padding-right : 40px;
    padding-top : 30px;
    6
    padding-bottom : 30px; }
    #pd2
    { border : 5px solid red;
    margin : 10px;
    padding-left : 40px;
    padding-right : 40px;
    padding-top : 30px;
    padding-bottom : 30px; }
    #pd2
    {
    border : 5px solid red;
    margin : 10px;
    padding-left : 40px;
    padding-right : 40px;
    padding-top : 30px;
    padding-bottom : 30px;
    }
    </style>
    </head>
    <body>
    <h1 id=pd1>
    Definition
    Corona viruses are types of viruses that typically affect the respiratory tracts of
    birds and mammals, including humans. Doctors associate them with the
    common cold, bronchitis, pneumonia, severe acute respiratory syndrome
    (SARS), and COVID-19. They can also affect the gut.
    </h1>
    <h1 id=pd2> COVID-19
    In 2019, the Centres for Disease Control and Prevention (CDC) started
    monitoring the outbreak of a new corona virus, SARS-CoV-2, which causes the
    respiratory illness now known as COVID-19. Authorities first identified the virus
    in Wuhan, China.
    Since then, the virus has spread to other countries, both in and outside Asia,
    leading the World Health Organization (WHO) to declare this as a pandemic.
    </h1>
    <h1 id=pd3> COVID-19

    7
    In 2019, the Centres for Disease Control and Prevention (CDC) started
    monitoring the outbreak of a new corona virus, SARS-CoV-2, which causes the
    respiratory illness now known as COVID-19. Authorities first identified the virus
    in Wuhan, China.
    Since then, the virus has spread to other countries, both in and outside Asia,
    leading the World Health Organization (WHO) to declare this as a pandemic.
    </h1></body></html>

    Output :

    Note :
    In above example the four style rules are defined which are specify four different
    padding area for four sides.

    You might also like