How To Set Height and Width For P Elements Using CSS

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

In Css We can set height and width values of p elements The height and width properties are used to set the height and width of an element.So today we discuss how to do it.

How To Set Height and Width For P Elements Using CSS


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

<p class="p1">Hello World.In this demo we are setting Height and Width to p element</p>
<p class="p2">Hello World.In this demo we are setting Height and Width to p element</p>




Step 2:Implement CSS code as below to set height and width for p element.

<style>
    body {
    background: #2e9ad0;
    }
    p{
        height: 200px;
        width: 50%;
        background-color: powderblue;
    }
</style>



Complete Code Setting Margins To P Element Using CSS .

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Height and Width For P Elements Using CSS</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{
        height: 200px;
        width: 50%;
        background-color: powderblue;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">How To Set Height and Width For P Elements Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <p class="p1">Hello World.In this demo we are setting Height and Width to p element</p>
        <p class="p2">Hello World.In this demo we are setting Height and Width to p element</p>
    </div>
    <br>
</div>
</body>
</html>

Related Post