HTML/CSSのテキストボックスのずれについて

HTML/CSSのテキストボックスについて

HTML,CSS初心者です．
HTMLとCSSでウェブサイトを作っています．

テキストとテキストボックスのサイズを変更したところ，どうしても画像の通り微妙にずれてしまうのですが，どう修正したらいいでしょうか？
ソースは以下の通りです．

HTML

HTML
1    <div class="text">
2      <p>
3        終了条件：
4        <input type="text" style="width: 100px; height: 35px;" value="1000" />
5      </p>
6    </div>

CSS

CSS
1.text {
2  text-align: center;
3  margin-top: 200px;
4  font-family: "HGP創英角ｺﾞｼｯｸUB";
5  font-weight: bold;
6  color: #595959;
7  font-size: 30px;
8}

行動規範の内容に同意します

回答1件

「目標となる状況」が説明されていないので、こちらで勝手に想像した結果であることをご了承ください。

前提として

inputとラベル文字列はベースラインがそろっています。inputの外枠は中の文字が中央に来るように描画されます。
それが質問文の画像の状況です。
視覚的にはラベル文字列を矩形とする領域とinputを矩形とする領域の縦位置に相違があるのでずれているように見えます。

調整方法

input側のvertical-alingを調整します。topにすると描画領域の上端を親要素（ラベル文字列のp）の上端とそろうように配置されるので見た目のずれが軽減されます。
input側のフォントを調整します。（このままが良いのなら無視してください）input側のフォントスタイルを親要素と同一にすることでinputの外枠の描画位置が変わります。結果、見た目のずれが軽減されているように見えます。
上記2つの調整を同時に行うとさらに調整されているように見えます。

以下の画像が調整結果。一番上が質問文の状態で、その次からが上記調整方法を適用した結果です。

html
1    <div class="text">
2      <p>
3        終了条件：
4        <input type="text" value="1000" class="i1"/>
5      </p>
6    </div>
7    <div class="text">
8      <p>
9        終了条件：
10        <input type="text" value="1000" class="i2"/>
11      </p>
12    </div>
13    <div class="text">
14      <p>
15        終了条件：
16        <input type="text" value="1000" class="i3"/>
17      </p>
18    </div>
19    <div class="text">
20      <p>
21        終了条件：
22        <input type="text" value="1000" class="i2 i3"/>
23      </p>
24    </div>

css
1.text {
2  text-align: center;
3  font-family: "HGP創英角ｺﾞｼｯｸUB";
4  font-weight: bold;
5  color: #595959;
6  font-size: 30px;
7}
8/* 質問本文の状態 */
9.i1{
10  width: 100px;
11  height: 35px;
12}
13/* vertical-alignを調整 */
14.i2{
15  width: 100px;
16  height: 35px;
17  vertical-align: top;
18}
19
20/* フォントを親要素から継承する */
21.i3{
22  font-family: inherit;
23  color: inherit;
24  font-weight: inherit;
25  font-size: inherit;
26  width: 100px;
27  height: 35px;
28}