Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 1 views

    CSS Margins

    Uploaded by

    muska.mia.22

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CSS Margins

    Uploaded by

    muska.mia.22
    1 views15 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    1 views15 pages

    CSS Margins

    Uploaded by

    muska.mia.22

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 15

    CSS Margins

    Margins
    Margins are used to create space around elements, outside of any defined borders

    Margin - Individual Sides


    CSS has properties for specifying the margin for each side of an element:
    •margin-top
    •margin-right
    •margin-bottom
    •margin-left

    • All the margin properties can have the following values:


    • auto - the browser calculates the margin
    • length - specifies a margin in px, pt, cm, etc.
    • % - specifies a margin in % of the width of the containing element
    Margins
    • Set different margins for all four sides of a <p> element:
    • p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    }
    Margin - Shorthand Property
    To shorten the code, it is possible to specify all the margin properties in one property.

    • margin: 25px 50px 75px 100px;


    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
    • p {
    margin: 25px 50px 75px 100px;
    }
    CSS Padding
    • The CSS padding properties are used to generate space around an
    element's content, inside of any defined borders.
    div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
    }
    • padding: 25px 50px 75px 100px;
    CSS Height, Width and Max-width

    he CSS height and width properties are used to set the height and width of an
    element.
    The CSS max-width property is used to set the maximum width of an element
    CSS height and width Values
    The height and width properties may have the following values:
    •auto - This is default. The browser calculates the height and width
    •length - Defines the height/width in px, cm, etc.
    •% - Defines the height/width in percent of the containing block
    CSS height and width Examples

    The max-width property is used to set the maximum width of an


    element.
    The max-width can be specified in length values, like px, cm, etc.,
    or in percent (%) of the containing block, or set to none (this is
    default. Means that there is no maximum width).
    • div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
    }
    CSS Layout - The position

    The position Property


    The position property specifies the type of positioning method used for an element.
    There are five different position values:
    •static
    •relative
    •fixed
    •absolute
    •sticky
    CSS Text
    • Text Color
    The color property is used to set the color of the text. The color is specified by:
    •a color name - like "red"
    •a HEX value - like "#ff0000"
    •an RGB value - like "rgb(255,0,0)

    Text Color and Background Color


    In this example, we define both the background-color property and the color property
    h1 {
    background-color: black;
    color: white;
    }
    CSS Text Alignment

    Text Alignment and Text Direction


    In this chapter you will learn about the following properties:
    •text-align
    •text-align-last
    •direction
    •unicode-bidi
    •vertical-align
    Text-Align
    The text-align property is used to set the horizontal alignment of a text.
    A text can be left or right aligned, centered, or justified.
    • text-align: center;
    }
    h2 {
    text-align: left;
    }
    h3 {
    text-align: right;
    }
    • div {
    text-align: justify;
    }
    Text Align Last

    • The text-align-last property specifies how to align the last line of a text
    • p.a {
    text-align-last: right;
    }
    p.b {
    text-align-last: center;
    }
    p.c {
    text-align-last: justify;
    }
    Text Direction

    • The direction and unicode-bidi properties can be used to change the


    text direction of an element:
    • p {
    direction: rtl ,ltr;
    unicode-bidi: bidi-override ;
    normal
    • Embed
    • Isolate
    • Bidi-override
    • plaintext
    Vertical Alignment
    • The vertical-align property sets the vertical alignment of an element
    • a {
    vertical-align: baseline;
    }
    b {
    vertical-align: text-top;
    }
    c {
    vertical-align: text-bottom;
    }
    d {
    vertical-align: sub;
    }
    e {
    vertical-align: super;
    }

    You might also like