HTML Paragraph Width
-
the Paragraph Element
<p>in HTML -
Use the CSS
widthProperty to Set Paragraphs With Different Widths in HTML -
Use the
<div>Element to Set Paragraphs With the Same Width in HTML - Conclusion
The language used to style a web page is called CSS (Cascading Style Sheets). It explains how HTML components should appear on a screen, paper, or other media.
A lot of work is saved via CSS; it can control the design of several web pages at once. In CSS files, external stylesheets are kept.
the Paragraph Element <p> in HTML
An HTML paragraph is represented by the <p> element. Although first-line indentation and blank lines are typically used to restrict paragraphs in visual media, HTML paragraphs can be any structural grouping of related material, such as photos or form fields.
Block-level components called paragraphs will automatically shut if another paragraph is processed before the concluding </p> tag.
Use the CSS width Property to Set Paragraphs With Different Widths in HTML
The width CSS attribute determines the width of an element. By default, it determines the content area’s width; however, if box-sizing is set to border-box, it determines the border area’s width.
<!DOCTYPE html>
<html>
<body>
<p style="">
<center><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9j5SfZTDxwimaSsWWsHv0xxjX5TY7j-z4PA&usqp=CAU"></center>
</p>
<p style="max-width:500px;">
<font size="+2">
<center><b>Arraying: Web and Java Developer.</b> </font>
<br>
<i>I'm Arraying, hello. I work with Minevelop as a web and Java developer. My areas of expertise include web development, plugin setup, and small yet complicated Spigot plugins.
<br><br>Since I started operating servers when I was eleven or twelve, I have accumulated a wealth of knowledge.
<br>Enjin: http://www.dev.com/profile/73763
<br>Email: array@dev.com</i>
</center>
</p>
<p style="">
<br>
<br>
<center><img src="https://cdn.dribbble.com/users/2131993/screenshots/15628387/media/13377c0dfb5e4adbfec1d646f20c9206.png?compress=1&resize=400x300"></center>
</p>
<p style="max-width:500px;">
<font size="+2">
<center><b>DomThePotato: Lead Java Developer.</b></font>
<br>
<i>I'm Dom, also known as DomThePotato, and I work at Minevelop as the company's primary Java developer. I specialise on plugins for utilities and everything else outside minigames. I can handle any request because I have more than 1.5 years of experience! experienced file administrator and backend manager.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat0.397375/
<br>Enjin: http://www.enjin.com/profile/783804080
<br>Email: domthepotato@mindev.com</i>
</center>
</p>
</body>
</html>
Use the <div> Element to Set Paragraphs With the Same Width in HTML
A block of material on the page is defined using the block-level element <div>. In addition to declaring a block, <div> accomplishes nothing; for instance, the following code produces a <div> element containing two paragraphs.
Remember that <p> components can be included within a </div>.
Example Code:
<!DOCTYPE html>
<html>
<style>
{
text-align:center;
}
#custom
{
width : 1100px;
}
</style>
<div id="custom">
<p style="">
<center><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9j5SfZTDxwimaSsWWsHv0xxjX5TY7j-z4PA&usqp=CAU"></center>
</p>
<p style="max-width:500px;">
<font size="+2">
<center><b>Arraying: Web & Java Developer.</b></font>
<br>
<i>I'm Arraying, hello. I work with Minevelop as a web and Java developer. My areas of expertise include web development, plugin setup, and small yet complicated Spigot plugins.
<br><br>Since I started operating servers when I was eleven or twelve, I have accumulated a wealth of knowledge.
<br>Enjin: http://www.dev.com/
</div>
<div id="custom">
<p>
<p style="">
<br>
<br>
<center><img src="https://cdn.dribbble.com/users/2131993/screenshots/15628387/media/13377c0dfb5e4adbfec1d646f20c9206.png?compress=1&resize=400x300" ></center>
</p style="max-width:500px;">
<font size="+2">
<center><b>DomThePotato: Lead Java Developer.</b>
</font>
<br>
<i>I'm Dom, also known as DomThePotato, and I work at Minevelop as the company's primary Java developer. I specialise on plugins for utilities and everything else outside minigames. I can handle any request because I have more than 1.5 years of experience! experienced file administrator and backend manager.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat0.397375/
<br>Enjin: http://www.enjin.com/profile/783804080
<br>Email: domthepotato@mindev.com</i>
</center>
</p>
</div>
</html>
Conclusion
You can also use <div> to assign the width, padding, margin, and other properties. You can set an id for a div that we can use in the style of a paragraph.
You can use id=" " in the <div> tag, and we can have the same width for paragraphs with the same id.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn