Cố định div khối nội tuyến có lề trái và phải chuyển động: điều gì đặc biệt về -4px?

Question

Điều này thật kỳ lạ. Tôi đang cố gắng để có một div cố định chiều rộng bên cạnh div phải thả nổi, và tôi không muốn sắp xếp lại các div (vì đây là chủ đề phân phối). Vì vậy, tôi đang chơi với margin âm ngay trên div cố định, và tôi nhận được những gì có vẻ với tôi lạ: nếu nó là -4px hoặc ít hơn, sau đó phao di chuyển sang một bên; nếu không, nó sẽ ở bên dưới.

Chơi với live demo with code at jsbin, trong đó có này:

<style> 
    .container { 
    width: 200px; 
    height: 200px; 
    } 
    .box { 
    width: 100px; 
    height: 100px; 
    } 
    .one { 
    margin-right: -4px; /* If <= -4, .two box shifts up */ 
    display: inline-block; 
    } 
    .two { 
    float: right; 
    } 
</style> 
    <div class="container"> 
    <div class="box one"></div> 
    <div class="box two"></div> 
    </div> 

Ai đó có thể giải thích những bí ẩn? Có gì đặc biệt về số -4 trong trường hợp này?

Answer 1

4px chỉ xảy ra là chiều rộng của "khoảng trống" tại số font-size.

Nếu bạn thay đổi font-size của #container để nói, 32px, it breaks.

cách Sensible để sửa lỗi này bao gồm:

• Remove margin-right: -4px and then remove the whitespace between the divs in the HTML.
• Không sử dụng display: inline-block. Thay vào đó, float: left the left div, and float: right the right div.
  • Nếu bạn lo lắng về it breaking khi bạn không có height cố định trên vùng chứa, thì bạn phải xóa các phao. Sử dụng overflow: hidden trên vùng chứa hoặc sử dụng clearfix.
  • With overflow: hidden (sử dụng này trừ khi bạn có specific problems)
  • With clearfix