Question 418731 in Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

3

Answers


  1. 0

    You’re using a <p> but the P element comes with lots of built-in style properties to make text look "good" (that even will vary between browsers). This default styling is what is causing the improper alignment.

    It’s much better to use a <div> instead, which has no default styling.

    If we do that, and also set padding and border to 0 for the textarea, then it will align:

    <div 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</div>
<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; padding: 0; border: 0"></textarea>
    Login or Signup to reply.
  2. 0

    I believe you need to dive into flex css, this is go-to approach to align children objects in parent object

    CSS Flexbox

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search