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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

1505閲覧

余白設定をしていないにも関わらず、子要素が親要素より下にずれる理由

mikage126

総合スコア2

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

1クリップ

投稿2021/05/26 03:24

編集2021/05/26 04:07

イメージ説明
イメージ説明

添付画像のように、cssでmarginなどを当て込んでいないにも関わらず
子要素が親要素より下にずれて表示されるのですが、なにか原因ごご存知でしょうか?

前提・実現したいこと

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

エラーメッセージ

該当のソースコード

php

1問題に対して直接は関係ない箇所は省略しております。 2 3<div class="calendar-area"> 4<table> 5<tbody> 6<tr class="day0fweek"> 7 8 9echo "\t<th style=\"color:".$style."\">".$weekday[$i]."</th>\n"; 10 $i ++; 11} 12 13?> 14 15</tr> 16 17<!-- 日付 --> 18 19 20<?php 21$i = 0;//カウンターリセット 22 23while( $i != $fir_weekday ){ //1日の曜日まで空白(&nbsp;)で埋める 24echo "\t<td>&nbsp;</td>\n"; 25$i ++; 26} 27for( $day=1; checkdate( $now_month, $day, $now_year); $day++){ 28 29if( $i > 6){ 30$i = 0; 31echo "</tr>\n"; 32echo "<tr>\n"; 33echo "\t<td style=\"color:".$style.";\">"; 34 echo $day ; 35 36 echo '</ul>' ; 37 echo '</div>' ; 38 echo '</div>' ; 39 40 41} 42 43 44 45echo"</td>\n"; 46 47$i++; 48} 49 50while( $i < 7 ){ 51echo "\t<td>&nbsp;</td>\n"; 52$i++; 53 } 54 ?> 55</tbody> 56</table> 57</div>

css

1.wrapper{ 2 max-width: 600px; 3 margin: 0 auto; 4 color: #666; 5 display: inline-block; 6 vertical-align: top; 7} 8 9/*カレンダー*/ 10 11table { 12 border-collapse: collapse; 13 width: 100%; 14} 15th { 16 color: #000; 17} 18th, td { 19 border: 1px solid #ddd; 20 padding-top: 10px; 21 padding-bottom: 10px; 22 text-align: center; 23}

試したこと

ここに問題に対して試したことを記載してください。

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikage126

2021/05/26 03:47 編集

恐れ入ります。 この問題の解決にコードは必須なのでしょうか かなり長いためわかりにくいように思うのですが
itagagaki

2021/05/26 03:56

問題を再現せずに原因を突き止めるのは困難です。 コードが長いなら、問題が再現できる最小のコードを作って見せてください。 その過程で解決してしまうことも多いものです。
Lhankor_Mhy

2021/05/26 04:16 編集

PHPのご質問でしたら、PHPの質問タグをつけることをおすすめいたします。 なお、PHPの部分を削除して試したところ、余白は見られず、問題が再現しませんでした。
Lhankor_Mhy

2021/05/26 04:48

tmsw さんのご回答にもあるように、私もホワイトスペースが原因じゃないかと感じています。 出力されたHTMLがあれば、もう少しはっきりするのではないかと思いますが。
guest

回答1

0

ベストアンサー

tr tdタグの後に改行やらtabやら入れちゃってるからの様な気がしますね。
だとすると1番目以降もなりそうなものですが、floatで並べてるので一番最初以降のは影響を受けていないと言う感じの様な。

一度、tr tdタグの前後に出力してある\tと\n消してみてはいかがでしょうか。

後、コンソールを見た感じだとpaddingもmarginも確かについてない様に見えますが、
一応、以下のCSSを試してみると良いかもしれません。

css

1 .calendar-area * { 2 margin: 0; 3 padding: 0; 4 }

投稿2021/05/26 04:35

編集2021/05/26 04:36
tmsw

総合スコア97

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問