可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行. block(块级元素): 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度. 能够改变元素的height,width的值. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距...
5.行内元素的padding-top和padding-bottom会起作用,不过就像脱离了标准流一样(即padding-left和padding-right的层级比其他元素高),并不会占据位置,并且还把其他元素给盖住了。但是,假如inline的元素没有内容,“padding-top、padding-bottom"将不起作用。如果想要起作用,只需要给padding-left或者padding-right设置一个...
4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的margin-top、margin-bottom不起作用。 5.行内元素的padding-top和padding-bottom会起作用,不过就像脱离了标准流一样(即padding-left和padding-right的层级比其他元素高),并不会占据...
4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的margin-top、margin-bottom不起作用。 5.行内元素的padding-top和padding-bottom会起作用,不过就像脱离了标准流一样(即padding-left和padding-right的层级比其他元素高),并不会占据...
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间,行内元素尺寸 由内含的内容决定,盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,但是 margin 却只有水平方向的值,垂直方向并没有起作用。行内元素的水平方向的padding-left,padding-right,margin- left,margin-rig...
3)block元素可以设置margin和padding属性 display:inline 1) inline元素不会独自占一行,多个相邻元素会排在同一行中,直到一行排不下,才会新换一行,其宽度随元素的内容而变化 2) inline元素设置的width,height属性无效 3)对于inline元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-ri...
1.inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。 2.inline元素设置width,height属性无效。 3.inline元素的margin和padding属性。margin属性不会生效。padding属性会生效,但是会和其他兄弟元素发生边距重叠。
1、当inline-block遇到同类时(inline、inline-block),谁的margin、padding和line-height的大,就按照谁的来显示,如下 .chicken{background-color: #9cb945;display: inline-block;width: 100px;height: 100px;margin-top: 50px;} .frog{background-color: #aa00aa;display: inline-block;} .cat{background...
结果很明朗了，祖先类的margin会让子类的absolute跟着偏移，而padding却不会让子类的absolute发生偏移。总结...
inline、inline-block、block 的 margin 和 padding 表现概述 测试结果图 测试代码 css body { margin: 0; } section { width: 800px; margin: 20px auto 0; border: 1px solid #660099; } header { line-height: 40px; font-size: 22px;