html padding 和 margin

最新推荐文章于 2024-05-14 20:02:25 发布

Alice_in_Wonderland

最新推荐文章于 2024-05-14 20:02:25 发布

阅读量1k

点赞数 1

文章标签： html border css

本文链接：https://blog.csdn.net/Alice_in_Wonderland/article/details/7515852

版权

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素

element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。

padding是代码的上下左右都同时加上所属值，你也可以分别加上所属值
比如左边则为：padding-left 
其具体用法如下：
定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释：不允许使用负值。但是margin可以。

例子 1
padding:10px 5px 15px 20px;
上内边距是 10px 
右内边距是 5px 
下内边距是 15px 
左内边距是 20px 

例子 2
padding:10px 5px 15px;
上内边距是 10px 
右内边距和左内边距是 5px 
下内边距是 15px 

例子 3
padding:10px 5px;
上内边距和下内边距是 10px 
右内边距和左内边距是 5px 

例子 4
padding:10px;
所有 4 个内边距都是 10px

关于图片居中显示的例子

1.使用margin padding

<html>
<body>
<div style="width:50%;height:120px;margin:100px 510px 0px;padding:100px 100px 0px;float:left"><img src="elephant.jpg"></div>
<div style="width:100%;height:50px;float:left;text-align:center">大象</div>
</body>
</html>

2.使用多个div

<html>
<body>
<div style="width:100%;height:50%"></div>
<div style="width:40%;height:200px;float:left;"></div>
<div style="width:60%;height:200px;float:left;"><img src="elephant.jpg">
<div style="width:100%;height:200px;float:left;">大象</div>
</div>
</body>
</html>

Alice_in_Wonderland

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html padding 和 margin

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素element : 元素。padding : 内边距，也有资料将其翻译为填充。border : 边框。margin
复制链接

扫一扫