Ancho de párrafo HTML

Zeeshan Afridi 20 junio 2023
  1. el elemento de párrafo <p> en HTML
  2. Use la propiedad width de CSS para establecer párrafos con diferentes anchos en HTML
  3. Use el elemento <div> para establecer párrafos con el mismo ancho en HTML
  4. Conclusión
Ancho de párrafo HTML

El lenguaje utilizado para diseñar una página web se llama CSS (hojas de estilo en cascada). Explica cómo deben aparecer los componentes HTML en una pantalla, papel u otros medios.

Se ahorra mucho trabajo a través de CSS; puede controlar el diseño de varias páginas web a la vez. En los archivos CSS, se mantienen las hojas de estilo externas.

el elemento de párrafo <p> en HTML

Un párrafo HTML está representado por el elemento <p>. Aunque la sangría de la primera línea y las líneas en blanco se usan normalmente para restringir párrafos en medios visuales, los párrafos HTML pueden ser cualquier agrupación estructural de material relacionado, como fotos o campos de formulario.

Los componentes a nivel de bloque llamados párrafos se cerrarán automáticamente si se procesa otro párrafo antes de la etiqueta final </p>.

Use la propiedad width de CSS para establecer párrafos con diferentes anchos en HTML

El atributo CSS width determina el ancho de un elemento. Por defecto, determina el ancho del área de contenido; sin embargo, si box-sizing se establece en border-box, determina el ancho del área del borde.

<!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 el elemento <div> para establecer párrafos con el mismo ancho en HTML

Un bloque de material en la página se define utilizando el elemento de nivel de bloque <div>. Además de declarar un bloque, <div> no logra nada; por ejemplo, el siguiente código produce un elemento <div> que contiene dos párrafos.

Recuerde que los componentes <p> se pueden incluir dentro de un </div>.

Código de ejemplo:

<!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>

Conclusión

También puede usar <div> para asignar el ancho, relleno, margen y otras propiedades. Puede establecer un id para un div que podemos usar en el estilo de un párrafo.

Puede usar id=" " en la etiqueta <div>, y podemos tener el mismo ancho para los párrafos con la misma identificación.

Zeeshan Afridi avatar Zeeshan Afridi avatar

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.

LinkedIn