0

I am styling my <p> tag to have a certain size, but when I use

<style>
p {
    width:200px;
    height:200px;
}
</style>

or

<style>
font {
    width:200px;
    height:200px;
}
</style>

neither of them worked, but it worked when I resized <h1> and <h2>. When I looked this up; None of them pertained to text, only iframes, or div(s).

I have tried making them different sizes, but they appear the same. I tried checking the console for errors, but there were none. Here is my code:

body {
  background: rgb(25, 45, 35);
}

p {
  height: 200px;
  width: 200px;
  display: inline;
  background-color: black;
}

div {
  background-color: black;
}
<font>
  <b>
    Code will be represented with:
    <br/>
    <p style="color:white;">CODE</p>
    <br/>
    <p style="color:goldenrod;">KEYWORD</p>
    <br/>
    <p style="color:yellow;">"Strings"</p>
    <br/>
    <p style="color:magenta;">Numbers / Boolean</p>
  </b>
</font>
<br/>

I expected the <p> tag to be resized like <h1> and <h2>, but it wasn't, why?

AuxTaco
  • 4,883
  • 1
  • 12
  • 27
Citrus fruit boy
  • 39
  • 5
  • In case you are working with HTML5, `font` tag is not supported in it. You should use CSS instead. – Mohammad Usman Aug 18 '19 at 02:48
  • 1
    Tags with `display: inline` ignore width and height. [More info.](https://web.stanford.edu/class/cs193x/lectures/05/block-inline) – Phix Aug 18 '19 at 04:21

1 Answers1

0

As commented by @Phix, you were making <p> tag as inline. instead in css make it to display: inline-block

body {
  background: rgb(25, 45, 35);
}

p {
  height: 200px;
  width: 200px;
  display: inline-block;
  background-color: black;
}

div {
  background-color: black;
}
<font>
  <b>
    Code will be represented with:
    <br/>
    <p style="color:white;">CODE</p>
    <br/>
    <p style="color:goldenrod;">KEYWORD</p>
    <br/>
    <p style="color:yellow;">"Strings"</p>
    <br/>
    <p style="color:magenta;">Numbers / Boolean</p>
  </b>
</font>
<br/>
Sravanth Pujari
  • 54
  • 1
  • 7
  • Thanks, I don't know alot about the differences between each option in CSS. and for some reason VS Code stopped providing CSS / HTML help when editing for some reason, if you know the answer to that, let me know! But thanks again. – Citrus fruit boy Aug 18 '19 at 05:01