htmlcss

Can you figure out how to align the top of the <p> tag with the top of the <textarea> tag?

I’m trying to create a text box in the style of a source code editor, but I’m using the <p> tag for the number side bar thing, and the <textarea> tag for the source code, so they do

this weird thing

I'm pretty sure the problem occurs for all cases, but here's the code:

<link href="https://www.fonts.googleapis.com/css?family=Source%20Code%20Pro" rel="stylesheet">
<p style=" font-family: 'Source Code Pro', monospace; color: #a9a9a9; background-color: #4f4f4f; width: 12px; height: 360px; text-align: center; word-wrap: break-word; float: left;">1</p>
<textarea style=" font-family: 'Source Code Pro', monospace; resize: none; width: 472px; height: 360px; color: white; resize: none; background-color: black; border-radius: 0; float: left;"></textarea>

Solution

  • In your code you need to apply margin: 0; padding: 0; to p tag.

    The extra margin on p tag is the default css.

    To remove default css styles from all element you need to add

    * {
  margin: 0;
  padding: 0;
}

    which I have added in following example.

    Apart from this you are encouraged to go through different layout techniques like flexbox and grid.

    * {
  margin: 0;
  padding: 0;
}

p {
  font-family: 'Source Code Pro', monospace;
  color: #a9a9a9;
  background-color: #4f4f4f;
  width: 12px;
  height: 360px;
  text-align: center;
  word-wrap: break-word;
  float: left;
}

textarea {
  font-family: 'Source Code Pro', monospace;
  resize: none;
  width: 472px;
  height: 360px;
  color: white;
  resize: none;
  background-color: black;
  border-radius: 0;
  float: left;
}
    <link href="https://www.fonts.googleapis.com/css?family=Source%20Code%20Pro" rel="stylesheet">
<p>1</p>
<textarea></textarea>