Lề lề của tôi không hoạt động theo cách tôi muốn hoặc mong đợi chúng. Tôi có vẻ như đầu trang margin-top của tôi ảnh hưởng đến các thẻ div xung quanh nó.Khủng bố lề CSS; Ký quỹ thêm khoảng cách bên ngoài phần tử cha
Đây là những gì tôi muốn và mong đợi: 
... nhưng đây là những gì tôi kết thúc với: 
Nguồn:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
Tôi đã phóng đại lề trong examp này le. Lề trình duyệt mặc định trên thẻ h1 có phần nhỏ hơn và trong trường hợp của tôi, tôi sử dụng Twitter Bootstrap, với Normalizer.css đặt lề mặc định là 10px. Không quan trọng, điểm chính là; Tôi không thể, không nên, muốn không thay đổi lề trên thẻ h1.
Tôi đoán nó giống với câu hỏi khác của tôi; Why does this CSS margin-top style not work?. Câu hỏi là làm cách nào để tôi giải quyết vấn đề cụ thể này?
Tôi đã đọc a few threads về các sự cố tương tự nhưng chưa tìm thấy bất kỳ câu trả lời và giải pháp thực tế nào. Tôi biết việc thêm padding:1px; hoặc border:1px; giải quyết được sự cố. Nhưng điều đó chỉ thêm các vấn đề mới, vì tôi không muốn có một padding cũng không phải là một đường viền trên các thẻ div của tôi.
Phải có giải pháp tốt nhất, tốt nhất? Điều này phải khá phổ biến.
Bạn bắt đầu với đặt lại CSS? –
Tôi sử dụng Normalizer.css. nhưng đó không phải là vấn đề. Nếu tôi xóa thẻ h1. Không có vấn đề gì cả. Vấn đề là tôi muốn có một lề trên thẻ h1 của tôi và đó là ảnh hưởng đến các yếu tố xung quanh. – jamietelin
Bạn có thể [đăng bản demo] (http://jsfiddle.net/) bằng bất kỳ cơ hội nào không? –