在設計一個網(wǎng)站的時候經(jīng)常都會用到盒子模型來進行設計,如果遇到這種盒子模型設計網(wǎng)站的話,那就有內(nèi)邊距和外邊距的區(qū)別。一個很優(yōu)秀的網(wǎng)站設計人員肯定是對于內(nèi)邊距和外邊距要掌握特別的熟悉,這樣才能夠在設計的時候靈活的去使用。其實內(nèi)邊距和外邊距最大的一個區(qū)別就是從名字就能夠聽出來一個是一個盒子內(nèi)部和內(nèi)容之間的一個距離,另外一個就是這個盒子外面和另外一個盒子,或者是和自己的復元素之間的一個距離。下面就來簡單給大家介紹一下這兩者的大致區(qū)別。
先來給大家介紹一下網(wǎng)站設計的時候,外邊距的使用。當我們在使用一個div的時候,如果這個容器外面需要留空白的話,我們就要使用外邊距。還有就是上下兩個容器之間我們需要留出一片空白,那這個時候就是要使用到外邊距。而內(nèi)邊距在使用的時候則是相反的,比如說我們在內(nèi)部某個地方要留空白的時候就可以使用。如果是使用外邊距本身不會影響到容器的寬度和高度,但如果是使用內(nèi)邊距的話,一旦使用了內(nèi)邊距就會導致這個容器被撐開,比如這個容器的寬度就會是原來的設置的那個寬度加上內(nèi)邊距的寬度而高度也是類似的。不管是內(nèi)邊距還是外邊距實際上都是可以單獨進行設置的,比如我們只需要容器的上面部分有一個外邊距或者是需要容器頂部有一個內(nèi)部距離容器內(nèi)內(nèi)容的一個距離。
關于網(wǎng)站設計里面內(nèi)邊距和外邊距的一些區(qū)分就簡單給大家聊到這里了。所謂的外邊距在css里面的名稱就是margin,而margin又可以分為margin-top,margin-left,margin-right等。內(nèi)邊距在css里面是padding,對應的還有padding-left,padding-right等。有的時候為了設置padding但是不影響容器的長度或者是寬度,我們還需要使用css里面的calc函數(shù)來進行計算,比如在設置內(nèi)邊距的時候為了不影響容器的實際長度,常用calc(100% - 10px)這樣的計算方式來避免容器寬度或者高度被改變。其中10px可能是內(nèi)邊距5px,左右或上下各5px,計算函數(shù)里面則是10px。在進行頁面設計的時候掌握這些小技巧可以更好的把握頁面容器的尺寸。