สงสัยเกี่ยวกับ CSS

อันนี้คือตัวโค้ดที่ผมสงสัยครับ

จากรูปจะเห็นว่าตัวโค้ดต่างกันที่มี border กับไม่มี border ทำไมกลายเป็นว่าถ้าผมไม่ใส่ border มันถึงมี background เฉพาะในส่วนของ h1 อะครับ ผมเข้าใจว่ารูปทางด้านซ้าย เรามี section ครอบ h1 แล้วเวลา h1 ใช้ style margin-top:100px ก็คือตัว h1 จะเลื่อนลงมา 100px ก็คือ section จะมีความสูงเท่ากับ 100px + ส่วนสูงของ h1 แล้วก็มี background สีฟ้าที่มีความสูงเท่ากับ 100px + ความสูง h1 (สรุปก็คือควรได้รูปเหมือนกับทางด้านขวา) ผมเข้าใจอะไรผิดตรงไหนหรอครับ ขอบคุณสำหรับคำตอบล่วงหน้าครับ