相對位置塊顯示不存在右邊距

簡要問題：單擊下面的第一個鏈接，並說明爲什麼Chrome在右側顯示保證金（如果沒有）。相對位置塊顯示不存在右邊距

長的問題：

我想知道爲什麼谷歌瀏覽器顯示從絕對和相對定位的塊不同的圖形表示。

在絕對定位塊上，Chrome按照我的預期顯示元素。

在相對定位的塊上，元素的寬度顯示更多。它看起來像一些邊距或填充，但我從這個div零填充和邊距，它仍然看起來在Chrome Inspect工具相同。

看看相對div如何對它的寬度有一個「擴展」。

inspected relative div screenshot

在這裏，絕對DIV沒有這種「延伸」。

inspected absolute div screenshot

這裏的地方這可以證明代碼。

.wrapper { 
 
    border: solid 1px red; 
 
    display: block; 
 
    width: 300px; 
 
    position: relative; 
 
    height: 150px; 
 
} 
 

 
.absolute-class, .relative-class { 
 
display: block; 
 
width: 100px; 
 
left: 20px; 
 
font-size: 24px; 
 
} 
 

 
.absolute-class { 
 
position: absolute; 
 
top: 10px; 
 
} 
 

 
.relative-class { 
 
position: relative; 
 
top: 30px; 
 
}

<body> 
 
    <div class="wrapper"> 
 
     <div class="absolute-class">Text 1</div> 
 
     <div class="relative-class">Text 2</div> 
 
    </div> 
 
</body>

我很擔心這一點，因爲我覺得這個額外的「保證金」是造成我開發一個頁面上的水平滾動。所以我想明白這是什麼，才能解決這個問題。

來源

2017-07-22 Rodolfo Ferraz

使用display: inline-block; _ 「我很擔心這一點，因爲我覺得這個額外的」邊距「導致水平滾動在我正在開發的頁面上，「_ - 它不是爲包裝div設置'overflow：auto'，那麼如果相對定位的元素實際上伸展得那麼遠，它會顯示滾動條 - 但它不會，所以無論實際的問題你正在努力解決，很可能不會反映在這段代碼中。 – CBroe

這看起來像一個自動右邊距。如果您檢查包裝div，則可以看到類似的幻像邊距。真奇怪的是，如果你在相對位置的div上指定了一個左邊距，那麼Chrome不會重新計算這個自動右邊距 - 它仍然會計算自動右邊距，就好像左邊距是auto一樣（在左邊），同時顯示您指定的任何左邊距。我沒有暗示爲什麼Chrome會這樣做，但它是Chrome，所以我並不感到奇怪，它會拉扯這種奇怪的惡作劇。 – BoltClock

@CBroe是的，你是對的。我試着通過做你所說的來重現滾動，而且它沒有顯示任何滾動條。但在我的真實項目中，它確實影響了滾動。我只是沒有把問題隔離到足以將它帶到這裏。所以我剛來這裏問這是什麼*幻影邊緣*。 –

由於您給left:20px並設置了固定寬度，所以這會超出div，因此left會將div推到包裝div的外部。使用padding-left:20px;

.wrapper { 
 
    border: solid 1px red; 
 
    display: block; 
 
    width: 300px; 
 
    position: relative; 
 
    height: 150px; 
 
} 
 

 
.absolute-class, .relative-class { 
 
display: block; 
 
width: 100px; 
 
padding-left: 20px; 
 
font-size: 24px; 
 
} 
 

 
.absolute-class { 
 
position: absolute; 
 
top: 10px; 
 
} 
 

 
.relative-class { 
 
position: relative; 
 
top: 30px; 
 
display: inline-block; 
 
}

<body> 
 
    <div class="wrapper"> 
 
     <div class="absolute-class">Text 1</div> 
 
     <div class="relative-class">Text 2</div> 
 
    </div> 
 
</body>

或者你也可以在.relative-class

.wrapper { 
 
    border: solid 1px red; 
 
    display: block; 
 
    width: 300px; 
 
    position: relative; 
 
    height: 150px; 
 
} 
 

 
.absolute-class, .relative-class { 
 
display: block; 
 
width: 100px; 
 
left: 20px; 
 
font-size: 24px; 
 
} 
 

 
.absolute-class { 
 
position: absolute; 
 
top: 10px; 
 
} 
 

 
.relative-class { 
 
position: relative; 
 
top: 30px; 
 
display: inline-block; 
 
}

<body> 
 
    <div class="wrapper"> 
 
     <div class="absolute-class">Text 1</div> 
 
     <div class="relative-class">Text 2</div> 
 
    </div> 
 
</body>

來源

2017-07-22 04:32:08

大概填充左邊將解決我的問題，謝謝。但它沒有回答這個問題。如果你從'.relative-class'中刪除'display：inline-block'，它仍然會在** right **中顯示這個_extra margin_。我只想知道這是什麼。 Chrome Inspect Tools沒有顯示任何以margin-right定義的數字，所以我知道這不是保證金，但它是什麼？ –

請再次檢查第一張圖片。我已將其替換爲顯示Chrome如何將額外寬度視爲** margin **的內容。 –

這是一個自動保證金，因爲您已將300px寬度設置爲包裝，將100px寬度設置爲文本div。所以，當你使用相對位置時，它需要300px的寬度。它覆蓋了100px，如同給出的文本一樣，其他空間顯示爲默認邊距，因爲它是空的。而當你給左20px然後它推動20px的外包裝的div。所以，它看起來像div之外，因爲它保持300px的總寬度。 –

相對位置塊顯示不存在右邊距

回答

相關問題