『Dental-Clinic』模写コーディングについて (2)「新着情報」の細かい線ができない。

お忙しい中ありがとうございます。

お使いのデバイス・アプリケーション

Mac OS Big sur・ Google Chome・Visual Studio Code
前提・実現したい事

Dental-Clinicの模写コーディングをしていまして、現在「新着情報」の部分を作っています。現在はこういう部分まで作れています。

実現をしたい事はこの細かい点々の線の空間を短くしたいと言う風に思っています。

この点々の線の空間を短くする方法を教えてもらえないでしょうか？よろしくお願いします。
ソースコード

HTML
1                    <!-- [テキスト１] -->
2                    <div class="text-box-1">
3                      <div class="date-1">
4                        <p>2012年08月01日</p>
5                      </div>
6                      <div class="textarea-1">
7                        <p>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
8                      </div>
9                    </div>
10                    <!-- [テキスト１] -->

CSS
1/* [テキスト１] */
2.text-box-1 {
3    position: relative;
4    /* background-color: aqua; */
5    border-bottom: 1px dashed #CCCCCC;
6    height: 75px;
7}
8
9.date-1 {
10    position: relative;
11    float: left;
12    height: 75px;
13    width: 123px;
14    /* background-color: #87cefa; */
15    vertical-align: middle;
16    font-weight: bold;
17    font-size: 13px;
18    margin-right: 15px;
19}
20
21.date-1 p {
22    position: relative;
23    top: 30px;
24}
25
26.textarea-1 {
27    float: right;
28    /* background-color: #7fff00; */
29    width: 436px;
30    height: 75px;
31    font-size: 13px;
32}
33
34.textarea-1 p {
35    position: relative;
36    text-align: left;
37    top: 25px;
38    left: 4px;
39    line-height: 19px;
40}
41/* [テキスト１] */

となっています。
補足情報

最後までみていただきありがとうございます。
もし問題点がありましたら、お手数をお掛けをしますが[ 質問への追記・修正依頼 ]をよろしくお願いします。
お忙しい中ありがとうございました。

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

回答1件

ベストアンサー

diff
1-    border-bottom: 1px dashed #CCCCCC;
2+    border-bottom: 1px dotted #CCCCCC;

検証ツールを使えば一発で分かります。

投稿2021/03/21 09:22

hatena19

総合スコア34075

Rwight

2021/03/21 09:28 編集

[ hatena19 ]さんご回答ありがとうございます。「border-bottom: 1px dashed #CCCCCC;」を「border-bottom: 1px dotted #CCCCCC;」に修正をしたら細かい線になりました。ご回答ありがとうございました。お忙しい中ありがとうございました。m(_ _)m 助かりました。。。

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