CSS Properties: How to set the height and width of a paragraph?

Last update on February 23 2024 13:05:49 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set the height and width of a paragraph</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.normal { /* Defines a CSS class named normal */
  height: auto; /* Sets the height of elements with this class to automatically adjust based on content */
}
.w3r { /* Defines a CSS class named w3r */
  height: 100px; /* Sets the height of elements with this class to 100 pixels */
  width: 100px; /* Sets the width of elements with this class to 100 pixels */
}
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<img class="normal" src="https://www.w3resource.com/images/w3resource-logo.png" alt="w3resource logo" width="100" height="50"><br><!-- Image element with class normal, displaying the w3resource logo -->
<p class="w3r">This paragraph height and width is 100px.</p><!-- Paragraph element with class w3r -->
</body>
</html><!-- Ends the HTML document -->

Explanation:>

This HTML document demonstrates how to set the height and width of elements using CSS classes.
CSS comments are added to explain each section of the code.
Two CSS classes are defined: normal and w3r.
The normal class sets the height to auto, allowing the element to adjust its height based on content.
The w3r class sets both the height and width of elements to 100 pixels.
An image and a paragraph are used to demonstrate the application of these CSS classes.

Live Demo:

See the Pen height-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page