float和margin-top
如果三個兄弟元素A,B,C按順序包含在同一個元素下,A元素使用了float,則B元素不能夠設定margin-top值,但可以設定margin-bottom和margin-left/right的值;C的四個margin值都可以設定;
所以,如果你希望A和B之間又間距,其中一個辦法是,在A和B之間新增一個div,將div的高度設定為希望兩者相距的px值(此時B不需要再新增margin) 或者不設定div高度,直接設定B的Margin也行;
這個div(help)可以不新增內容,但是一定要設定width和height,哪怕設定為0;
<div class="father">
<div class="A"> </div>
<div class="help"></div>
<div class="B"></div>
</div>
<style>
.A { float:left; }
.help { width:100%; height:20px; }
<style>
相關推薦
float和margin-top
如果三個兄弟元素A,B,C按順序包含在同一個元素下,A元素使用了float,則B元素不能夠設定margin-top值,但可以設定margin-bottom和margin-left/right的值;C的四個margin值都可以設定; 所以,如果你希望A和B之間又間距,其中一個辦法是,在
利用float和margin實現兩端對齊佈局
實現效果如下圖: 這種佈局方式一般我們都會想到直接使用float浮動外加margin-right做右側留白,既實現多個小模組按順序排列, 超出一行又會自動換行,從而實現這個效果。但是,實現過程中會遇到一個問題就是最右邊的留白處理問題, 當然可以根據選擇每行會有多少個模組,設定:nth-.
top和margin-top等的區別
這一次因為是拿著別人的原始碼改成自己要的效果,我發現原來我之前一直都只會用margin-top、margin-bottom等是多傻的舉動!因為在某些時候top、bottom、left、right比margin-top、margin-bottom、margin=left、m
CSS中的float和margin的混合使用
在最近的學習中,在GitHub上找了一些佈局練習,我發現了我自己對佈局超級不熟悉(很難受)。 在以前的學習中,感覺使用CSS就記住各個屬性的功能就OK了,但是呢?真的很打臉。不說了,太傷心了,進入正題吧! 最近我使用float和margin佈局,加深了我對這兩個一起使用的理解。(**新生可以看一下,大神請
關於子元素的margin-top溢出和元素浮動對父元素高度影響解決方案
20px oat -- 外邊距 生成 round border top display 以下是個人學習筆記,僅供學習參考。 1.關於子元素的margin-top作用在無margin-top-border的父元素上導致子元素的margin-top溢出問題。 在給沒有margi
css父元素和子元素之間margin-top的問題
問題:父元素的盒子包含一個子元素盒子,給子元素盒子一個垂直外邊距margin-top,父元素的盒子也會受到子元素的margin-top值的影響。 原因:所有毗鄰的兩個或者多個元素的margin將會合併為一個margin共享之。毗鄰的定義為:同級或者巢狀的盒元素,並且它們之間沒有非空內容。padding或者b
父元素和子元素的margin-top問題
父元素和子元素的margin-top問題 父元素盒子包含子元素盒子,給父元素設定margin-top有效果,但給子元素設定margin-top,父元素和子元素的距離沒有變化,但是父元素盒子會往下走子元素的margin-top的值。這個就是典型的margin摺疊問題。 原理:marg
行內元素和塊級元素:內聯(行級)元素不能設定margin-top
內聯(行級)元素 不能設定寬高,但padding屬性可以設定,需要注意的是行級元素不能設定margin-top和margin-bottom屬性,但可以設定margin-left和margin-right屬性。如果需要設定行級元素的margin-top或margin-botto
padding-top、margin-top和top的區別
padding-top:10px;是指容器內的內容距離容器的頂部有10個畫素,是包含在容器內的;margin-top:10px;是指容器本身的頂部距離其他容器有10個畫素,不包含在容器內;top:10p
HTML中Float和元素定位
分層 tom 依據 none 單位 正常 對象 ott 目前 浮動 1、float屬性——浮動 float:left;float:right;float:none; 2、清除浮動——clear Clear:left\right\both\none 3、溢出處
關於css中父元素與子元素之間margin-top的問題
可用 技術分享 一個 src 文檔流 重疊 cond one left 之前在使用經常遇到下面的問題: html: 1 <div class="top"> 2 <div class="one">I‘m the first!</div&
css中margin-top或者margin-bottom失效
text margin for lin over oat display ati tab css中margin-top是設置容器的外間距了距離了,div嵌套後,margin-top或者margin-bottom失效了,在網上打到下面的方法可以解決。 設計頁面的時候
css-子div設置margin-top影響父div
元素 ima img 設置 alt gin mar mage 如果 父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己父元素,祖先元素,所有需要在父元素設置border,或者paddingcss-子di
float和Float的區別
spa 字符 parse aid font amp 方法 字符串 blank float是基本數據類型,Float是包裝類(封裝類)。封裝類可將接本數據類型封裝後當作對象進行操作,並為各種基本數據類型提供各種轉換功能。例如Float f = new Float(3.4f);
一個關於margin-top的問題
one str gin border 解決方法 顯示 clear order bin 兩個 此時內部div的樣式為 當我把margin選中 如圖所示: 我想要的效果是子div離父div有一個20px的間隙,但顯然現在不是我想要的結果, 然後就開始查資料: 這個“問
HTML中padding和margin的區別和用法
布局 語法 tom mil strong 替換元素 它的 一段 div margin(外邊距) 定義:margin是用來隔開元素與元素的間距,發生在元素本身的外部,margin用於布局分開元素使元素與元素互不相幹。 提示:margin: top right bottom
padding和margin的區別和作用及各種場合出現的bug
absolut 之間 包括 net 無法 pfile .com 20px http 一、padding Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, conte
Java中float和double轉換的問題
leg throw exceptio int row 如何 方法 避免 stat 為什麽double轉float不會出現數據誤差,而float轉double卻誤差如此之大? double d = 3.14; float f = (float)d; Syst
vertical-align負值和margin-bottom負值的區別
ica clas 這一 width tro true utf class 怎樣 先看一下vertical-align在W3C當中的值有哪一些: 可是它有數值這一說確實很少提起,我們來看這麽一段代碼: <!DOCTYPE html> <html
Android中的padding和margin的區別
區別 you content and bsp schema out ring http 在Android的布局中,常常有人將padding和margin搞混,他們其實不一樣的,padding是該控件的內部距離。 magin是該控件與其他控件之間的距離。例如 <Line