css - 如何使一个元素不扩展其他元素的边距

Question

我有一个表单，每次输入获得焦点时都会有提示显示并告诉用户应该做什么(“指定 8 位密码”等等)。

问题是，每次出现时，由于大小的原因，输入的边距会变大或变小(取决于提示的大小)。我希望输入保持原样，而不是每次都彼此远离。

这是提示的 css 部分(标记为 p 元素)。

p {
margin: 0px 0 0 0;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #5cb85c;
border-radius: 5px;
padding: 3px;
padding-left: 8px;
padding-right: 8px;
color: white;
box-shadow: 10px 10px 9px -5px rgba(0,0,0,0.2);
box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.9);
width: 350px;
text-align: center;}

我想不出更多必要的代码部分来发布，如果您需要它们，请告诉我。

预先感谢您的回答。

我的 html:

 <table class="innertable">
    <tr>
      <td width="200px">
                                            Character Name:
      </td>
      <td>
      <input type="text" name="name" id="name" placeholder="Firstname_Lastname" class="form-control" class="col-md-3" value="">

     </td>
     <td>
     <p id="nameHint" class="hint">Please specify a username using A-Z letters only, in a Firstname_Lastname format</p>
     </td>
 </tr>
 <tr>
     <td>
                                            Password:
    </td>
    <td>
                                            <input type="password" name="password" id="password" class="form-control">
    </td>
    <td>
    <p id="passHint" class="hint">Please specify an 8 digits password</p>
    </td>
    </tr>
  <tr>
    <td>
                                        Verify Password:
    </td>
    <td>
    <input type="password" name="password_verify" id="password_verify" class="form-control" value="">
    </td>
    <td>
    <p id="verifyHint" class="hint">Please specify your password again, for verification</p>
    </td>
  </tr>
  <tr>
    <td>
    Age:
    </td>
    <td>
    <input type="text" name="age" id="age" class="form-control" value="">                                 
   </td>

Answer 1

尝试添加:

box-sizing: border-box;