How Do I Add Margins and Padding and Height/Width in Css

Posted By Bajarangi soft , Posted On 29-09-2020

The CSS margin properties are used to create space around elements, outside of any defined borders,With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left),Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins,The CSS padding properties are used to generate space around an element's content, inside of any defined borders.The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

1.Add margins to the Html File using Css

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid black;
            margin-top: 100px;        
            /*  below margin properties according to your content */
            margin-bottom: 100px;
            margin-right: 150px;
            margin-left: 80px;
            background-color: lightblue ;
            margin: 25px 50px 75px;
            margin: 20px 0 0 0;/*if border none use this we called margin collapsed*/
        }
    </style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

2.Add Padding to the Html File using Css

<!DOCTYPE html>
    <html>
    <head>
        <style>
            div {
                border: 1px solid black;
                padding: 25px 50px 75px 100px;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>

    <h2>The padding shorthand property - 4 values</h2>

    <div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px

        This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px
    This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>

</body>
</html>

3.Add height/Width to the Html File using Css

<!DOCTYPE html>
    <html>
    <head>
        <style>
            .ss {
                border: 1px solid black;
                padding: 25px 50px 75px 100px;
                background-color: lightblue;
            }
            /* see the differences without using padding */ 
            div {
                max-width: 500px;
                height: 100px;
                background-color: powderblue;
            }
        </style>
    </head>
    <body>

    <h2>The padding shorthand property - 4 values</h2>

    <div class="ss">This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px

        This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px
    This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>
<br>
<h2>height and width</h2>
    <div> This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px</div>
</body>
</html>

Related Post

How Do I Add Margins and Padding and Height/Width in Css
How To Add Text Padding Widget In Flutter Android App
Set Cell Padding and Cell Spacing In Css
Css Padding And Its Properties
Differences Between Margins and Paddings In CSS
How To Set Margins To P Element Using CSS With Example
How To Set Padding For P Elements Using CSS With Example
How To Add Padding To Checkbox Using Flutter Android
How To Use Overflow Box With Padding Using Flutter App