How To Set Margins To P Element Using CSS With Example

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

In CSS margin properties are used to create space around elements, outside of any defined borders.So today we discuss how to set margin using css

How To Set Margins To P Element Using CSS With Example

Step 1:Create index.html file and implement as below code in it.

<p>Hell World.In this demo we are setting margin to p element</p>


Step 2:Implement CSS code as below to set margin for p element.
 

<style>
    body {
    background: #2e9ad0;
    }
    p {
        border: 1px solid black;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 80px;
        background-color: lightblue;
    }
</style>


Complete Code Setting Margins To P Element Using CSS .

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Margins To P Element Using CSS With Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
    background: #2e9ad0;
    }
    p {
        border: 1px solid black;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 80px;
        background-color: lightblue;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Set Margins To P Element Using CSS With Example</h1>
    </div>
    <br>
    <div class="well">
        <p>Hell World.In this demo we are setting margin to p element</p>
    </div>
    <br>
</div>
</body>
</html>

Related Post