Tại sao các lề div của tôi bị chồng chéo và làm cách nào để khắc phục?

Question 1

Tôi không hiểu tại sao lề của các div này lại chồng lên nhau.

.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}

<div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

Mở rộng đoạn mã

hình ảnh

Question 2

Tôi nghĩ đó là một biên độ bị thu hẹp. Chỉ tính đến lề lớn nhất giữa phần dưới cùng của phần tử đầu tiên và phần trên của phần tử thứ hai.

Việc không có quá nhiều khoảng cách giữa hai đoạn văn là điều hoàn toàn bình thường.

~~Bạn không thể tránh điều đó với hai phần tử liền kề nên bạn phải phóng to hoặc thu nhỏ lề lớn hơn.~~

CHỈNH SỬA: cf. W3C

Hai biên liền nhau nếu và chỉ khi:

cả hai đều thuộc về các hộp cấp khối trong luồng tham gia vào cùng một ngữ cảnh định dạng khối

không có hộp dòng, không có khoảng trống, không có đệm và không có đường viền ngăn cách chúng

cả hai đều thuộc các cạnh hộp liền kề theo chiều dọc

Vì vậy, không có sự sụp đổ floatnào đưa phần tử ra khỏi dòng chảy.

Question 3

Lề, trái ngược với padding (đệm một chiều rộng cụ thể) là "thực hiện điều này như một khoảng cách tối thiểu".

Nó sẽ không đặt khoảng cách đó cho tất cả các yếu tố.

Như bạn có thể thấy, lề dưới của khối liên lạc được chuyển đến hộp nhập liệu. Đó là ký quỹ đang hoạt động ở đây. Lề khác, lề trên từ đầu vào, không có hiệu lực, vì nó nhỏ hơn và không đạt đến phần tử khối nơi nó thực sự sẽ đẩy phần tử trở lại . 2 lề trùng nhau và không ảnh hưởng đến nhau.

Question 4

Nếu bạn không thể sử dụng padding và thực sự cần để lề không bị chồng chéo, đây là một mẹo:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

Vui lòng khởi chạy đoạn mã này để giới thiệu:

Hiển thị đoạn mã

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

Mở rộng đoạn mã

Question 5

Chú ý đến display: flexphần tử mẹ.

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}

<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>

Mở rộng đoạn mã

Question 6

Thêm một thẻ div rõ ràng giữa hai đối tượng