1. ホーム
  2. html

[解決済み] Margin-Topで外側のdivを押し下げます。

2022-06-12 05:36:57

質問

wrapper divの最初の要素としてheader divを持っていますが、header divの中のh1にtop marginを追加するとheader div全体が下に押し出されてしまいます。この現象は、ページの最初に表示される要素にトップマージンを適用すると必ず起こりますね。

以下はサンプルコードです。ありがとうございます。

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}
<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

どのように解決するのか?

置く overflow:auto 親もとに div

このリンクで詳しく見る