css中行内元素padding,margin,width,height说明
2014-05-06 15:17
519 查看
要点:
块状元素前后元素会换行
行内元素前后元素不会换行
第一:行内元素与宽度
宽度不起作用
span {
width:200px;
}没有变化
第二:行内元素与高度
高度不起作用
span{
height:200px;
}
没用变化
第三:行内元素与padding,margin
span{
padding:200px;
}
影响左右,不影响上下
如何实现
<ul>
<li>第一</li>
<li>第一</li>
<li>第一</li>
</ul>
中的li在同一行显示并有上下边距呢,
如果用display:inline,可行让其在一行内显示,但上下padding不起作用。
所以这种情况下用float:left;使其在一行内显示,并且其还是block元素,可以用
padding使与上下padding起作用,差生一定距离
块状元素前后元素会换行
行内元素前后元素不会换行
第一:行内元素与宽度
宽度不起作用
span {
width:200px;
}没有变化
第二:行内元素与高度
高度不起作用
span{
height:200px;
}
没用变化
第三:行内元素与padding,margin
span{
padding:200px;
}
影响左右,不影响上下
如何实现
<ul>
<li>第一</li>
<li>第一</li>
<li>第一</li>
</ul>
中的li在同一行显示并有上下边距呢,
如果用display:inline,可行让其在一行内显示,但上下padding不起作用。
所以这种情况下用float:left;使其在一行内显示,并且其还是block元素,可以用
padding使与上下padding起作用,差生一定距离
相关文章推荐
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
- css行内元素padding,margin,width,height没有变化
- CSS 8.2 高级-对齐补充(关于行内元素,块元素,替换元素和非替换元素及其width height margin padding特性)
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- 各种元素的width height margin padding 特性
- 行内元素能否设置width,height,padding,margin
- css 父元素设置padding、border、margin的情况下,子元素width100%呈现情况
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- css中padding、margin两个重要属性的详细介绍及举例说明
- CSS学习笔记:id与class、padding和margin、min-height和height
- 1.width是核心内部元素,margin,padding,border值不属于width 2.absolute 两个绝对定位的元素如果是同一父元素会发生重叠,而不是与float一样会正常排布
- height 用 padding, width 用 margin
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)//DIV居中中问题
- 关于行内元素的margin padding一些说明;background-color的范围
- CSS专题(二):元素大小与位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth s
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
- jquery之修改元素样式(获取和设置样式,使用css(),width(),height()方法)