html中margin外边距和padding内边距有啥用? 一般在啥情下使用？只对块级标签都有用还是只对div?

Posted 2023-03-22

参考技术A 1,块级元素设置margin时怎样?
答:左右正常显示,上下margin以最大的那个为标准显示,
如果同时设置了float,margin则正常显示

2,块级元素设置padding时怎样?
答:均以自己参数显示
如果同时设置了float,padding则正常显示

3,块级元素下有行级元素时设置padding会怎样? 答:块级元素还是以自己样式显示,行内元素宽和高如果没有指定时则显示内容所占用的宽和高,padding值无效,但行内设置背景则遮盖块级元素

4,块级元素下有行级时设置margin会怎样?
答:块级元素左右正常显示,上下margin以最大为标准显示,左右正常显示,上margin有一个像素,下margin无效

5,行级元素设置margin或padding时怎样?
答:左右正常显示,上margin,padding有一个像素,下margin,padding无效,padding右边出现10px空白(不同浏览器中显示大小不一)
如果同时设置了float,margin则正常显示

6,行级元素下如果有块级元素时设置padding会怎样?
答:会以行级的宽和高在后面显示块级元素及样式

7,行级元素下如果有块级元素时设置margin会怎样?
答:左右正常显示,上margin有一个像素,下margin无效

看着有点乱,这东西要动手写一遍就了解了本回答被提问者采纳

什么是内边距和外边距？

外边距：margin

内边距：padding

padding和margin的区别？

　　对于一个标签来说，

　　　　　　padding增加自己的内边距，在原来的基础上往外扩充，

　　　　　　　　扩充的部分应用自己的样式，把自己扩大了

　　　　　　margin增加自己的外边距，在原来的基础上增加往外扩充，

　　　　　　　　应用父标签的样式，自己原来的大小样式不变

      padding：统一设

      　　padding：top right bottom left

      padding：上下 左右

      　　(分别对应一个，4个，2个参数)

      margin和padding一致

如何逻辑整理？

1. padding 扩充自己区域，占用父标签区域，扩充部分应用自己的样式，改变自己大小
2. margin 扩充自己区域，占用父标签区域，扩充部分应用父标签的样式，保持自己大小不变
3. 不写具体的参数属性，参数个数为 1,2,4 其中对于一种