html中div間距CSS樣式布局設(shè)置的方法有哪些

發(fā)布時(shí)間：2022-03-04 16:43:53 來(lái)源：億速云閱讀：263 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“html中div間距CSS樣式布局設(shè)置的方法有哪些”，在日常操作中，相信很多人在html中div間距CSS樣式布局設(shè)置的方法有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html中div間距CSS樣式布局設(shè)置的方法有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

一、float實(shí)現(xiàn)支配結(jié)構(gòu)div間距

擺布結(jié)構(gòu)布局，一樣平常我們采用float:left與float:right實(shí)現(xiàn)，控制設(shè)置好支配div分其他寬度，緊要寄望寬度要計(jì)較好。

1、直接看代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支配結(jié)構(gòu)兩個(gè)DIV之間間距20px css5.com.cn</title>
<style>
.box{ width:400px; border:1px solid #999; overflow:hidden}
.left{ float:left; width:120px; height:100px; bac千克round:#CCC}
.right{ float:right; width:260px; height:100px; bac公斤round:#06F}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

2、效果截圖

html中div間距CSS樣式布局設(shè)置的方法有哪些
把持float和寬度完成左右div之間間隔20px

3、闡發(fā)小結(jié)：采取float浮動(dòng)，完成兩個(gè)div分袂靠左和靠右，也就是緊貼的阿誰(shuí)DIV間距，假設(shè)這兩個(gè)div寬度之和小于父級(jí)寬度（形成div并排），那么他們之間就會(huì)孕育發(fā)生間隙，要是他們寬度之和大于父級(jí)寬度，他們就會(huì)獨(dú)有占一行錯(cuò)位。這里class=box的父級(jí)對(duì)象寬度為400px，子級(jí)class=left寬度為120px，子級(jí)class=right寬度為260px，這樣400-120-260=20，這樣就可人造兩個(gè)div之間出產(chǎn)生了20px隔斷。從而實(shí)現(xiàn)div隔斷間距。

二、padding完成div間隔效果

不論凹凸結(jié)構(gòu)仍是左右結(jié)構(gòu)緊貼的DIV之間間距，均籠統(tǒng)使用padding完成，無(wú)意偶爾重要注意是，擺布或高下隔絕距離的排版是甚么樣條件，要是不有邊框或后盾差距，要完成div間隔從而實(shí)現(xiàn)模式之間有隔絕距離，這個(gè)時(shí)候使用padding非常利便的。

1、代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>padding完成DIV之間間距排版 css5.com.cn</title>
<style>
.box{ width:400px; border:1px solid #999; overflow:hidden}
.left{ float:left; width:120px; height:100px; background:#CCC}
.rights{ float:left; padding-left:20px; width:260px; height:100px}
.box2{ padding-top:30px}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="rights">使用padding-left實(shí)現(xiàn)左div與右DIV形式間距</div>
</div>
<div class="box2">看看與上一個(gè)DIV間距，實(shí)現(xiàn)上一個(gè)DIV與下一個(gè)DIV形式間距成就</div>
</body>
</html>

2、成效

html中div間距CSS樣式布局設(shè)置的方法有哪些
css padding完成擺布、高下間距功效

3、綜合小結(jié)：這里采取padding完成div間距排版，要求是構(gòu)造div盒子間距完成形式之間間距，這個(gè)時(shí)辰根抵需要兩個(gè)div之間不有邊框，同時(shí)不有后臺(tái)差距，雖然使用padding結(jié)構(gòu)隔斷功效理論上兩個(gè)div是緊貼的，只是借用padding邊框與形式之間補(bǔ)白間距，不有后援沒(méi)有邊框差距，完成div之間需求的間距效果。

三、margin實(shí)現(xiàn)html div間距

比照padding配置間距，margin配置間距就無(wú)需思索div可否有邊框，div之間是否后盾不一致，若何前提下均或許使用margin-left、margin-right、margin-top、margin-bottom完成需求間距。

1、div隔絕距離實(shí)例代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin完成DIV之間間距排版 css5.com.cn</title>
<style>
.box{ width:400px; border:1px solid #999; overflow:hidden}
.left2{ float:left; width:120px; height:100px; bac千克round:#CCC}
.right2{ float:left; margin-left:20px; bac千克round:#09F; width:260px; height:100px}
.box3{ margin-top:30px; border:2px solid #F00}
</style>
</head>
<body>
<div class="box">
<div class="left2"></div>
<div class="right2">使用margin-left完成左div與右DIV模式間距</div>
</div>
<div class="box3">margin-top實(shí)現(xiàn)上一個(gè)DIV與下一個(gè)DIV間距成績(jī)</div>
</body>
</html>

2、margin div間距成績(jī)

html中div間距CSS樣式布局設(shè)置的方法有哪些
css margin完成div間距

3、闡發(fā)小結(jié)：一樣平常div或其他元素之間間距使用margin外構(gòu)造花式實(shí)現(xiàn)，早期瀏覽器對(duì)margin兼容欠安會(huì)孕育發(fā)生雙倍值或削減一倍值成就，但現(xiàn)在支流閱讀器均曾經(jīng)支持，但也要掌握f(shuō)loat與padding布局間距，前提應(yīng)允還是削減對(duì)margin帶值使用。使用margin:0 auto的兼容不受影響。

到此，關(guān)于“html中div間距CSS樣式布局設(shè)置的方法有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

html中div間距CSS樣式布局設(shè)置的方法有哪些

一、float實(shí)現(xiàn)支配結(jié)構(gòu)div間距

二、padding完成div間隔效果

三、margin實(shí)現(xiàn)html div間距

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、float實(shí)現(xiàn)支配結(jié)構(gòu)div間距

二、padding完成div間隔效果

三、margin實(shí)現(xiàn)html div間距