網(wǎng)站設(shè)計(jì)的時(shí)候內(nèi)邊距和外邊距有什么區(qū)別

　　在設(shè)計(jì)一個(gè)網(wǎng)站的時(shí)候經(jīng)常都會(huì)用到盒子模型來進(jìn)行設(shè)計(jì)，如果遇到這種盒子模型設(shè)計(jì)網(wǎng)站的話，那就有內(nèi)邊距和外邊距的區(qū)別。一個(gè)很優(yōu)秀的網(wǎng)站設(shè)計(jì)人員肯定是對(duì)于內(nèi)邊距和外邊距要掌握特別的熟悉，這樣才能夠在設(shè)計(jì)的時(shí)候靈活的去使用。其實(shí)內(nèi)邊距和外邊距最大的一個(gè)區(qū)別就是從名字就能夠聽出來一個(gè)是一個(gè)盒子內(nèi)部和內(nèi)容之間的一個(gè)距離，另外一個(gè)就是這個(gè)盒子外面和另外一個(gè)盒子，或者是和自己的復(fù)元素之間的一個(gè)距離。下面就來簡(jiǎn)單給大家介紹一下這兩者的大致區(qū)別。

　　先來給大家介紹一下網(wǎng)站設(shè)計(jì)的時(shí)候，外邊距的使用。當(dāng)我們?cè)谑褂靡粋€(gè)div的時(shí)候，如果這個(gè)容器外面需要留空白的話，我們就要使用外邊距。還有就是上下兩個(gè)容器之間我們需要留出一片空白，那這個(gè)時(shí)候就是要使用到外邊距。而內(nèi)邊距在使用的時(shí)候則是相反的，比如說我們?cè)趦?nèi)部某個(gè)地方要留空白的時(shí)候就可以使用。如果是使用外邊距本身不會(huì)影響到容器的寬度和高度，但如果是使用內(nèi)邊距的話，一旦使用了內(nèi)邊距就會(huì)導(dǎo)致這個(gè)容器被撐開，比如這個(gè)容器的寬度就會(huì)是原來的設(shè)置的那個(gè)寬度加上內(nèi)邊距的寬度而高度也是類似的。不管是內(nèi)邊距還是外邊距實(shí)際上都是可以單獨(dú)進(jìn)行設(shè)置的，比如我們只需要容器的上面部分有一個(gè)外邊距或者是需要容器頂部有一個(gè)內(nèi)部距離容器內(nèi)內(nèi)容的一個(gè)距離。

　　關(guān)于網(wǎng)站設(shè)計(jì)里面內(nèi)邊距和外邊距的一些區(qū)分就簡(jiǎn)單給大家聊到這里了。所謂的外邊距在css里面的名稱就是margin,而margin又可以分為margin-top,margin-left,margin-right等。內(nèi)邊距在css里面是padding，對(duì)應(yīng)的還有padding-left,padding-right等。有的時(shí)候?yàn)榱嗽O(shè)置padding但是不影響容器的長(zhǎng)度或者是寬度，我們還需要使用css里面的calc函數(shù)來進(jìn)行計(jì)算，比如在設(shè)置內(nèi)邊距的時(shí)候?yàn)榱瞬挥绊懭萜鞯膶?shí)際長(zhǎng)度，常用calc(100% - 10px)這樣的計(jì)算方式來避免容器寬度或者高度被改變。其中10px可能是內(nèi)邊距5px，左右或上下各5px，計(jì)算函數(shù)里面則是10px。在進(jìn)行頁面設(shè)計(jì)的時(shí)候掌握這些小技巧可以更好的把握頁面容器的尺寸。