<li>タグ　カタカナを入力時のみ縦にズレてしまう。

前提・実現したいこと

初めてHTMLをコーディングしておりまして、<li>を使ったメニューの作成で詰まってしまいました。
三段目の「コーディネートの幅が広がる最大5色のバリエーション」の部分が若干下にズレているのを修正したいです。

該当のソースコード

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="test.css">

</head>

<body>
    <div class="top" align="center">
        <img src="https://test.co.jp/site_data/image/test.jpg">
    </div>
    <div class="features">
        <h2>特　長</h2>
        <ul class="features_list" align="center">
            <li class="features_list1">
                <img src="https://test.co.jp/site_data/image/test.jpg">
                <p class="p1">- 利便性 -</p>
                <p class="p2">RV車や大型車にも対応 - 高さ、奥行も余裕のサイズバリエーション -</p>
            </li>
            <li class="features_list2">
                <img src="https://test.co.jp/site_data/image/test.jpg">
                <p class="p1">- 快適性 -</p>
                <p class="p2">用途に合わせて選べる屋根材バリエーション</p>
            </li>
            <li class="features_list3">
                <img src="https://test.co.jp/site_data/image/test.jpg">
                <p class="p1">- デザイン性 -</p>
                <p class="p2">コーディネートの幅が広がる最大5色のバリエーション</p>
            </li>
        </ul>
    </div>
</body>

@media screen and (max-width:480px) {
    /*画面幅が480pxまでの時*/
}

@media screen and (min-width:781px) {
    /*画面幅が781px以上の時*/
    body {
        width: 800px;
    }
}

* {
    margin: 0px;
    padding: 0px;
}

.top img {
    width: 750px;
}

.features h2 {
    text-align: center;
    font-size: 35px;
    padding: 10px;
    margin-top: 20px;
    border-top: solid 1px #a9a9a9;
}

ul {
    list-style: none;
}

.features_list li {
    display: inline-block;
    vertical-align: top;
}

.features_list img {
    padding: 0 5px;
}

.p1 {
    font-size: 25px;
    padding: 20px;
}

.p2 {
    position: relative;
    top: 10px;
    width: 240px;
    font-size: 12px;
    padding: 0 5px;
}

試したこと

カタカナを含むとレイアウトが崩れるようで『- デザイン性 -』のカタカナの部分だけを10pxに変更や削除を行うとレイアウトの崩れが治ります。
ブロックのサイズが『- 利便性 -』『- 快適性 -』の部分は250×69なのに対して、『- デザイン性 -』の部分は250×78なので恐らくこの分だけ下にズレているのかと思いますが、解決方法が分かりません。
宜しくお願いいたします。

補足情報（FW/ツールのバージョンなど）

visual studio code(1.41.0)を使用しております。
ページの確認はプラグインのbrowser previewを使用しています。

退会済みユーザー

2019/12/18 03:28

そもそも字がガタガタなんですが、フォントは大丈夫ですか？

omoti

2019/12/18 03:46

文字がガタガタなのはコーディングソフトにあるプラグインのブラウザで確認しているからだと思います。通常のブラウザだと特にフォントは問題ないように思います。そして、通常のブラウザだと特にズレが確認できませんでした。あまりプラグインのブラウザを過信するのは良くないのかもしれません。アドバイスありがとうございました。