盒子模型的margin負數用法

2022-09-03 07:36:12 字數 819 閱讀 1404

盒子的margin用法大家都應該很清楚,在實際中一般使用margin來水平居中或者讓自己移動相應的位置,但是margin給負數在實際中也是有用的。

如圖為兩個浮動的盒子。

給左邊的盒子margin-left: -50px;後如圖所示

如圖,藍色盒子移動了,但是粉色盒子自身只是被壓住了,並沒有移動。

**如下

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>margin負數demo

title

>

<

style

>

*.p1

.p2style

>

head

>

<

body

>

<

div

class

="p1"

>

div>

<

div

class

="p2"

>

div>

body

>

html

>

前端 margin用法 盒子模型裡補充

當時說到了盒模型,盒模型包含著margin,為什麼要在這裡說margin呢?因為元素和元素在垂直方向上margin裡面有坑。我們來看乙個例子 html結構 css樣式 father box1 box2 當給兩個標準流下兄弟盒子 設定垂直方向上的margin時,那麼以較大的為準,那麼我們稱這種現象叫塌...

盒子模型之margin相關技巧!

廢話不多說,直接進入主題,margin相關技巧。1 設定元素水平居中 margin x auto 2 margin負值讓元素位移及邊框合併。外邊距合併 指當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決外邊距合併的方法 a 使用這種特性...

css盒子模型外邊距(margin)

margin屬性用於設定外邊距,即控制盒子和盒子之間的距離 屬性作用 margin left 左外邊距 margin right 右外邊距 margin top 上外邊距 margin botom 下外邊距 外邊距典型應用 外邊距可以讓塊級盒子水平居中,但是必須滿足兩個條件 盒子必須指定了寬度 wi...