400-9986-936

NEWS CENTER

新闻中心

网站设计的时候内边距和外边距有什么区别


华企立方   -  2023-4-9 1:43:21  -  阅读数:

  在设计一个网站的时候经常都会用到盒子模型来进行设计,如果遇到这种盒子模型设计网站的话,那就有内边距和外边距的区别。一个很优秀的网站设计人员肯定是对于内边距和外边距要掌握特别的熟悉,这样才能够在设计的时候灵活的去使用。其实内边距和外边距最大的一个区别就是从名字就能够听出来一个是一个盒子内部和内容之间的一个距离,另外一个就是这个盒子外面和另外一个盒子,或者是和自己的复元素之间的一个距离。下面就来简单给大家介绍一下这两者的大致区别。



  先来给大家介绍一下网站设计的时候,外边距的使用。当我们在使用一个div的时候,如果这个容器外面需要留空白的话,我们就要使用外边距。还有就是上下两个容器之间我们需要留出一片空白,那这个时候就是要使用到外边距。而内边距在使用的时候则是相反的,比如说我们在内部某个地方要留空白的时候就可以使用。如果是使用外边距本身不会影响到容器的宽度和高度,但如果是使用内边距的话,一旦使用了内边距就会导致这个容器被撑开,比如这个容器的宽度就会是原来的设置的那个宽度加上内边距的宽度而高度也是类似的。不管是内边距还是外边距实际上都是可以单独进行设置的,比如我们只需要容器的上面部分有一个外边距或者是需要容器顶部有一个内部距离容器内内容的一个距离。

  关于网站设计里面内边距和外边距的一些区分就简单给大家聊到这里了。所谓的外边距在css里面的名称就是margin,而margin又可以分为margin-top,margin-left,margin-right等。内边距在css里面是padding,对应的还有padding-left,padding-right等。有的时候为了设置padding但是不影响容器的长度或者是宽度,我们还需要使用css里面的calc函数来进行计算,比如在设置内边距的时候为了不影响容器的实际长度,常用calc(100% - 10px)这样的计算方式来避免容器宽度或者高度被改变。其中10px可能是内边距5px,左右或上下各5px,计算函数里面则是10px。在进行页面设计的时候掌握这些小技巧可以更好的把握页面容器的尺寸。