div 设置a4大小_这节我们来讲设置填充padding

  内边距padding  

回到我们之前的案例

我们要把他改造成这样的效果

首先需要把背景图片去掉，增加一个内部的image标签，给每一个item增加一个边框border，这里我们用合并的写法来写

效果如下：

我们如果想要图片和边框之间产生一定的距离，我们就要给图片增加一些边距

我们继续编写item img的样式

但是我们设置完效果如下

图片虽然设置了外边距，但是外面的框并没有什么变化，因为现在的div的高被我们已经设置了

我们回来将这个div的宽和高都去掉

再来看一下效果

但是我们现在添加外边距的方法并不是很完美

假如我们要添加一下文字，默认情况下，文字和图片会排列在一行的

效果

如果想让它们上下排列，我们可以手动操作，加一个换行的标签

这时候问题就来了，由于这些文字，它不是一个单独的元素，我们没有办法单独给文字设置外边距，当我们希望文字与边框也有外边距时，我们要怎么办呢？

这时候，我们这节所要讲的填充也就是内边距padding就要出场了

比如说现在有这样的例子，正常来说文字是紧贴着边框的，如果我们给这个元素增加了20px的内边距填充，这时候元素就会被撑大

最中我们实际看到的效果是这个样子，它也会分为四个方向，上、右、下、左

所以回到我们的案例

我们并不需要给图片设置外边距，我们只需要给item设置内边距padding填充即可

这样效果就是我们所要的效果了

那现在我们看到的图片为什么产生了换行呢

这时因为他们三个图的父元素没有发生任何大小的变化，我们给三个dv增加填充的时候，三个div都发生了改变，父元素容不下了，就产生了换行

我们现在应该重新计算一下父元素的宽度

每一个元素是290px，那么总数是870px，

我们再来看一下效果

现在效果就变成了正常的状态

最后我们来总结一下盒子模型都有哪些内容

每一个都有上、右、下、左四个方向

- End –

--- web分享，分享的不只是web