HTML 段落の幅
Web ページのスタイルを設定するために使用される言語は、CSS (Cascading Style Sheets) と呼ばれます。 HTML コンポーネントが画面、紙、またはその他のメディアにどのように表示されるかについて説明します。
多くの作業は CSS によって節約されます。 一度に複数の Web ページのデザインを制御できます。 CSS ファイルには、外部スタイルシートが保持されます。
HTML の段落要素 <p>
HTML 段落は <p> 要素で表されます。 通常、最初の行のインデントと空白行はビジュアル メディアの段落を制限するために使用されますが、HTML の段落は、写真やフォーム フィールドなど、関連する素材の構造的なグループにすることができます。
別の段落が終了 </p> タグの前に処理されると、段落と呼ばれるブロックレベルのコンポーネントは自動的に閉じます。
CSS width プロパティを使用して HTML で異なる幅の段落を設定する
width CSS 属性は、要素の幅を決定します。 デフォルトでは、コンテンツ領域の幅を決定します。 ただし、box-sizing が border-box に設定されている場合は、境界領域の幅が決まります。
<!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>
<div> 要素を使用して HTML で同じ幅の段落を設定する
ページ上のマテリアルのブロックは、ブロック レベル要素 <div> を使用して定義されます。 ブロックを宣言する以外に、<div> は何も実行しません。 たとえば、次のコードは、2つの段落を含む <div> 要素を生成します。
</div> 内に <p> コンポーネントを含めることができることに注意してください。
コード例:
<!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>
まとめ
<div> を使用して、width、padding、margin、およびその他のプロパティを割り当てることもできます。 段落のスタイルで使用できる div の id を設定できます。
<div> タグで id=" " を使用すると、同じ ID の段落を同じ幅にすることができます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn