一番上の行間が縮まらない

一番上のtitleとspanの感覚を、点線のように小さくしたいです。よろしくお願いいたします。

一枚目が現状のもの、二枚目が理想のレイアウトです。(上のスペースは不要)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>
 <title>ああああああ</title>
<link rel="stylesheet" href="style.css" type="text/css"> <!--これなんだ？-->

<style>

.body{
   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
  }

.title p {
  font-size: 40px;
  font-weight:  bold;
  text-align: center;
  padding: 0;
  margin-top: 20px;
}

.title span {
  font-size: 20px;
  text-align: center;
  color: #73683b;
  line-height: 0px;
  margin: 0px;
  padding: 0;
/*あれ？？近くにならないぞ、、、並べ方の問題か？？*/

}

.back{
  margin: 10px 100px;
  padding-top: 100px;
  height: 1000px;/*もしレスポンシブ化したかったらmax-widthとか使って構成し直しかな？？*/
  background-color: #E5E5E5;

}

.baloon{
	margin: 10px 60px;/*この親要素がbalppnじゃないのか？？*/
	padding: 40px;
	background-color: white;
}

.baloon.content {
  text-align: left;
}

.Q1 p {
  font-size: 20px;
  font-weight:  bold;
  color: #73683b;
}

.A1 p {
  font-size: 15px;
  line-height: 20px;
  margin: 2.5px 0;
 }

 .A1 a {
  font-size: 15px;
  line-height: 20px;
  color: #1F94BB;
  text-decoration: underline;

 }

.Q2 p {
  font-size: 20px;
  font-weight:  bold;
  color: #73683b;
}

.A2 p {
  font-size: 15px;
  line-height: 20px;
 }

 .Q3 p {
  font-size: 20px;
  font-weight:  bold;
  color: #73683b;
}

.A3 p {
  font-size: 15px;
  /*line-height: 20px;*//*<p>が並んでいるときは、同じ要素内の高さではなく、他の要素との関係で指定*/
  margin: 2.5px 0;
 }

 .Q4 p {
  font-size: 20px;
  font-weight:  bold;
  color: #73683b;
}

.A4 p {
  font-size: 15px;
  line-height: 20px;
  margin: 2.5px 0;
 }

 .Q5 p {
  font-size: 20px;
  font-weight:  bold;
  color: #73683b;
}

.A5 p {
  font-size: 15px;
  line-height: 20px;
 }

  .Q6 p {
  font-size: 20px;
  font-weight:  bold;
  color: #73683b;
}

.A6 p {
  font-size: 15px;
  line-height: 20px;
 }

</style>
</head>

<body>

<div class="title">
 <p>ああああああ</p>
 <p><span>アアア</span></p>
</div>
<div class=back>
<div class=baloon>
  <div class="content">
    <div class="Q1">
	  <p>Q.あああああああああああああああああああああああ</p>
    </div>
    <div class="A1">
    <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    <a href="http://asobi-gokoro.net/"><span style="text-decoration: underline;">あああああああああああああ</span></a>
    </div>
    <div class="Q2">
    <p>Q.ああああああああああああああああああ</p>
    </div>
    <div class="A2">
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
    <div class="Q3">
    <p>Q.あああああああああああああああ</p>
    </div>
    <div class="A3">
    <p>ああああああああああああああああああああああ</p>
    <p>あああああああああああああああ</p>
    <p>あああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああ</p>
    </div>
    <div class="Q4">
    <p>Q.あああああああああああああああああああ</p>
    </div>
    <div class="A4">
    <p>ああああああああああああああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
    <div class="Q5">
    <p>Q.ああああああああああ</p>
    </div>
    <div class="A5">
    <p>あああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
     <div class="Q6">
    <p>Q.あああああああああああああああああ</p>
    </div>
    <div class="A6">
    <p>ああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
</div>
</div>

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

回答1件

ベストアンサー

数値は適当にいじって下さい。

css
1.title p:first-child {
2    margin-block-end: -40px;
3}
4
5.title p:last-child {
6    margin-block-end: -10px;
7}

元のスキマは、「p」タグのデフォルトスタイルに「margin-block-end: 1em;」が付いてため、「font-size: 40px」によって出来たマージンです。
(1emは文字の高さを基準にした単位。40pxの文字サイズを元にブラウザが勝手にマージン付けてる状態)

回答のCSSはそれを削るように書いたものですが、これが筋の良いやり方かどうかは分かりません。
きちんと作るならデフォルトCSSをすべてリセットして、HTMLからきれいにした方が良いかもしれません。

投稿2021/12/15 13:25

umau

総合スコア831

nitori-kun

2021/12/16 05:07

ありがとうございました！元のスキマは、「p」タグのデフォルトスタイルに「margin-block-end: 1em;」が付いてため、「font-size: 40px」によって出来たマージンです。 -＞大変勉強になりました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

一番上の行間が縮まらない

関連した質問