pタグで囲まれた文章の下のスペースを狭くしたい

Question

【現在の状況】

【見本】

ABOUT下の<P>タグの文章にあるスペースがありすぎるので、見本と同じくらいにしたいです。また、文章の行数も5行から、見本にあるように3行にしたいです。

やり方を教えてください。

 <main>
    <article>
        <section>
          <div class="about">
            <h2>ABOUT</h2>
            <p>私たちの社会は、10年前、100年前、あるいは1000年前よりも確実に進化しています。科学こそが社会を進化させ、幸せをつくり出したのだと信じています。科学は与えられるものではなく、私たち自身が開拓し、進化させていくものです。144Labは、科学に触れ、さらなる開拓と進化に参加する人々を、ちょっとだけお手伝いします。</p>
            <div class="link-btn about-btn" style="width: 20%;"><a href="#">企業情報</a></div>
          </div>
        </section>

 /* main */
  h2 {
    font-size: 50px;
    font-size: 43px;
    font-weight: normal;
    padding-left: 30px;
    display: inline-block;
  }

  h2::before {
    content: "！";
    color: red;
    font-size: 70px;
    top: 13px;
  }


  /* about */

  .about {
    background-color: #F2F3F7;
    height: 500px;
    margin: 150px 180px;
    padding-top: 0;
    width: auto;
  }

  .about h2 {
    position: relative;
    top: -95px;
    left:-90px
  }

  .about p {
    position: relative;
    top: -100px;
    padding: 0 0;
  }
  
  .about h2::before {
    content: "！";
    color: red;
    font-size: 70px;
    top: 13px;
  }
  
  .about p {
    background-position: center;
    line-height: 40px;
    width: 61%;
    margin: auto;
  }

  .about-btn {
    position: relative;
    top: 60px;
  }
  

Comments

[K_3578]

>やり方を教えてください。
これだけだとただの丸投げ質問です。まずは自分で思うようにやってみて、その結果どうなったかを
書いてください。

[m.ts10806]

見本がhtmlなら差分比較しては。

[mutsuki22]

単純に3行にするだけなら方法自体は1つではないので、仕様上避けたい方法とかもあるかもしれないですしこれとは言いづらいです。
前のお二人が仰ってる通り一度やってみて出来なければ、修正箇所を聞くなり、見本があるならそれと比べる等をした方が結果として効率も良い気がします。

[K_3578]

文言調べてみたらサイトの模写っぽいので
普通に検証ツール使って見てみれば良いんじゃない？としか
ただ、見た上で何故そうなるかを理解しないと何の成長にもならないと思いますが。

[Lhankor_Mhy]

他の質問を見ると、どうやら、補足欄だけではなくて、回答や回答のコメント欄も無視するスタイルのようですね。
対話したくないなら質問をしなきゃいいのに、と思うのですが。

Answer 1

heightの値を小さくする

.about {
    background-color: #F2F3F7;
    height: 350px;
    margin: 150px 150px;
    padding-top: 0;
    width: 999px;
  }