タイトルの位置を調節したい

Question

前提

タイトル（治療内容）の位置を緑の背景内で、
上に78ｐｘ、下に70ｐｘをあけて表示させたい。
padding-top:78px;、padding-bottom:70px;で指示すると
文字の位置は調節できるが、今度はアンダーラインがずれてしまう。

実現したいこと

タイトルの位置を上に78ｐｘあけて表示させたい。

発生している問題・エラーメッセージ

/* 治療内容 */
.about {
height: 1520px;
background-color: #F5FCF8;
text-align: center;

}

h4 {
font-size: 24px;
background: linear-gradient(transparent 70%, #99E5A5 70%);
max-width: 96px;
margin: 78px auto 70px;

}

.treatment-sub {
font: 16px;
color: #444444;
text-align: center;
margin-bottom: 34px;
font-weight: thin;
}

該当のソースコード

<div class="about">

    <div class="treatment">
        <h4>治療内容</h4>
        <p class="treatment-sub">以下の検査項目以外でも、まずはご相談頂けますと幸いです。</p>
        </div>

試したこと

padding-top:78px;、padding-bottom:70px;で指示すると
文字の位置は調節できるが、今度はアンダーラインがずれてしまう。

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

ここにより詳細な情報を記載してください。

Comments

[yambejp]

「緑の背景内」とは？

Answer 1

ちょっと解説

こういうデザインの場合私は普段は、1つのセクションの上下にpaddingをつけるようにしています！
↓多分こんな感じのレイアウトかな？と思いますので、緑色背景である.treatmentの上下にpaddingをつけます。

（白）　　    別のセクション
------------------------------------
         (padding-top:78px)
（緑）　    　 .treatment
       (padding-bottom:78px ?)
------------------------------------
（白）　　    別のセクション

「治療内容」と、その下の文章「以下の検査項目以外でも、まずはご相談頂けますと幸いです。」の間の余白は、

• 「治療内容」にmargin-bottom: 70px;
• または、文章にmargin-top: 70px;

どちらかの方法でつけたらいいと思います！

コード例

• 見た目確認用サンプルページ：https://jsfiddle.net/cd6npb2v/1/

<div class="about">

  <div class="treatment">
    <div class="inner"><!-- div追加 -->
      <h4 class="section-title">治療内容</h4><!-- クラス名追加 -->
      <p class="treatment-sub">以下の検査項目以外でも、まずはご相談頂けますと幸いです。</p>
    </div>
  </div>
  
</div>

/* 治療内容 */
.about {
  /* 
    要素の高さは、要素の中の内容物のサイズや、
    レスポンシブで画面幅が変わったら高さも変わるので、
    あまり固定値（pxなど）で指定しない方がいいです。
  */
  /* height: 1520px; */
  /* background-color: #F5FCF8; */
  /* text-align: center; */
}

.treatment {
  background-color: #F5FCF8;
  padding-top: 78px;
  padding-bottom: 78px;
}

/* 中身の最大幅を決めて、左右を中寄せにする */
.inner {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.section-title {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  background-image: linear-gradient(transparent 70%, #99E5A5 70%);
  font-size: 24px;
  text-align: center;
  /* max-width: 96px; */
  /* margin: 78px auto 70px; */
}

.treatment-sub {
  font: 16px;
  color: #444444;
  text-align: center;
  margin-top: 70px;
  /* margin-bottom: 34px; */
  font-weight: thin;
}

Comments

[Cocode]

ベストアンサー決定後に失礼しました。
回答を書いているうちに解決済みになられたのですね！
無事解決されてよかったです。
私の投稿は無視してくださって大丈夫です。

[web83740439]

わかりやすい説明ありがとうございました。

Answer 2

.treatment h4に設定しているmargin: 78px auto 70px;のmargin-top: 78pxが効かないという問題ですよね。
原因は、マージンの相殺という動作です。これは、けっこうはまることになるので、理解しておくことをお勧めします。

マージンの相殺の習得 - CSS: カスケーディングスタイルシート | MDN

marginの相殺が起こる3つのケースと例外を紹介！ | 模写修行メディア

解決方法としては、上記リンクにもいろいろ紹介されてます。親要素のpaddingを使うとか。
下記のように親要素に flow-root を設定するという方法などもあります。

.treatment{
  display: flow-root;
}

Comments

[web83740439]

コメントありがとうございます。
空の要素に設定する上下のmarginでの相殺だったとの理解で間違い無いでしょうか。

[hatena19]

「親要素と子要素に設定する同方向のmargin」の相殺ですね。
h4 の上方向の margin が親要素(.treatment)の外にはみ出て、さらにその親要素(.about)の外にもはみ出ている状況です。

[web83740439]

ありがとうございます。
難しいですね。もう少し記事を読み込みます。
解説ありがとうございました。

Answer 3

こういうことでしょうか？

<style>
.treatment{
  background-Color:gray;
  padding-top:78px;
}
.treatment h4 {
font-size: 24px;
background: linear-gradient(transparent 70%, #99E5A5 70%);
max-width: 96px;
margin:auto;
margin-bottom:70px;
height:-moz-fit-content;
}
</style>
<div class="treatment">
<h4>治療内容</h4>
<p class="treatment-sub">以下の検査項目以外でも、まずはご相談頂けますと幸いです。</p>
</div>

Comments

[web83740439]

一番早く対応していただき
ありがとうございます。
素早く解決できました。