1、内联样式是不能设置width和height的。
2、它可以设置水平内边距,会影响页面布局,会将水平方向其他元素挤开。
但是垂直内边距则不会影响页面布局,它是选择覆盖其他元素。
3、它可以设置边框,垂直边框不会影响页面布局。
但是水平边框会(可以理解为跟水平内边距一样)
同时,内联元素支持水平方向的外边距,相邻元素外边距不会重叠而是求和。
内联元素不支持垂直外边框。
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: #bfa; } .box1{ width: 100px; height: 100px; background-color: red; } .s1{ /* 内容区、内边距 、边框 、外边距 * */ /* * 内联元素不能设置width和height */ /*width: 200px; height: 200px;*/ /* * 设置水平内边距,内联元素可以设置水平方向的内边距 */ padding-left: 100px ; padding-right: 100px ; /* * 垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局 */ padding-top: 50px; padding-bottom: 50px; /* * 为元素设置边框, * 内联元素可以设置边框,但是垂直的边框不会影响到页面的布局 */ border: 1px blue solid; /* * 水平外边距 * 内联元素支持水平方向的外边距 */ /* margin-left:100px ; margin-right: 100px; */ /* * 内联元素不支持垂直外边距 */ margin-top: 200px; margin-bottom: 200px; } .s2{ /* * 为右边的元素设置一个左外边距 * 水平方向的相邻外边距不会重叠,而是求和 */ /* margin-left: 100px; */ } </style> </head> <body> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <div></div> </body> </html>
以上就是css内联样式的盒子模型,希望对大家有所帮助。更多css学习指路:
本文教程操作环境:windows7系统、css3版,DELL G3电脑。