33411


お世話になります。[SEO目的で簡単なサイト](http://learning-4-u.main.jp/)

を作っているのですが、リンクページのLearn English...という女性の  
ブロック要素にpadding-top:50px；と指定しても３列で指定してある  
（わざと黄金比調整する為articleで処理しています。）文章との間が広がり  
ません。この女性の動画のpadding-top：50px;というのは「何に」「関連」  
しているのでしょうか？以下はhtmlとcssです。初心者で恥ずかしいですが  
宜しくお願い致します(m_m)

htmlです。

[code]

    <!DOCTYPE html>
    <head>
    <html lang="ja">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article:    
    http://ogp.me/ns/article#">
    <meta name="google-site-verification"    
    content="xvPmXUq3pDAfBjr652zC_VuReonQi8C-aYoY1MIdRsE" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>徒然なるままに英語と日本語の差異について語るブログ</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/slimmenu.min.css" rel="stylesheet" type="text/css">
    <link href="css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="css/slick/slick.css" rel="stylesheet" type="text/css">
    <link href="css/slick/slick-theme.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <header id="title">
    <h1><u>徒然なるままに英語と日本語の差異について語るブログ</u></h1>
    </header>
    <h2 class="h2">日本語と英語の決定的な違い</h2>
    <article id="Subtitle+">
    <p id="Blue">その１：主語ー目的語ー動詞（日本語）
    <br&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    主語ー動詞ー目的語（英語）の大きな壁
    </article>
    <article class="Subtitle">
    <p id="Red">その２：格変化（日本語で言う活用）が<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    殆ど生じない英語という言語
    </article>
    <article class="Subtitle">
    <p id="Green" >その３ : 発音の仕方がそもそも異なる<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    英語という言語：とりわけ母音について。
    </article>
    
    
    <img src="img/bench_and_sea.jpg" height: 371px; width: 600px; alt="海とベン
    チ" id="Position1">
    
    <div　id="Video1"><iframe src="https://www.youtube.com/embed/qMM_hwyHxaI?   
    list=FLDUi4OEEh1WnwTT5CYPbE-Q?ecver=2" width="640" height="395"   
    allowfullscreen></iframe></div>
    </body>
    </html>
    
[/code]

CSSです。

[code]

    #title { color: #64FE2E; font-family: cursive; text-align : center; }
    .h2 { margin-top: 0px; margin-bottom: 0px; font-family: cursive; }
    #Blue { color : #58ACFA; font-weight : bold; }
    #Red { color : #FE2E2E; font-weight : bold; }
    #Green { color : #64FE2E; font-weight : bold; }
    .Subtitle { font-family: cursive; margin-top: 49px; }
    .Subtitle+ { font-family: cursive; margin-top: 20px; }
    .Subtitle3 { font-family: cursive; margin-top: 49px; margin-bottom:49p; }
    #Position1{ position:absolute;top:150px; right:100px;}
    #Video1{ margin-top: 50p; }
    #For_P { style-type="text/css"
    
[/code]

畏れ入ります(m_m)。


CC BY-SA 3.0
2017-03-18T18:12:05.997
33404
2017-03-19T10:05:29.477
2017-03-19T03:37:42.640
8000
19182
question
css
前ブロック要素をabsoluteで配置してしまった場合、後続ブロック要素のpadding-topは何に対して適用されるのでしょうか？


通常ブロック要素は上から下へと順番に並ぶわけですが、`position: absolute` や `position: fixed`
が指定された要素はこの並びから独立して配置されます。つまり、そうでない要素を並べる時にはこれらの要素は存在しないものとして扱われます。

ですからご質問のケースでは、動画の `margin-top` は文章との間に働くことになります。

これが期待に反して効いていないように見えたのは、単位をtypoしていたからです。

CSSとして正しいかどうかは [W3C CSS 検証サービス](http://www.css-
validator.org/validator.html.ja#validate_by_input+with_options)
などで検証することができますが、ブラウザの開発者ツールで当該要素に期待したスタイルが適用されているか確認するのも手です。

[![画像の説明をここに入力](https://i.stack.imgur.com/D9yA4.png)](https://i.stack.imgur.com/D9yA4.png)

上はChromeの例ですが、無効な指定ということで左側に警告アイコンが出ていますね。


CC BY-SA 3.0
2017-03-19T10:05:29.477
33411
2017-03-19T10:05:29.477
8000
33404
answer