直播带货源码，CSS 3之图文混排效果
1. 设置图片与文字间距
用 padding 属性能设计图片和文字之间的距离，即文字与图片之间在一定间距；
padding 属性主要用来在一个声明中设置所有内边距属性，即能设置元素所有内边距的宽度，或设置各边上内边距的宽度；
注意： 不允许指定负边距值；
语法格式如下所示：
padding:padding-top |padding-right |padding-bottom |padding-left
参数说明：
padding-top：设置距离顶部内边距；
padding-right ：设置距离右边内边距；
padding-bottom ：设置距离底部内边距；
padding-left ：设置距离左部内边距；
例子 1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字环绕</title>
<style>
img{max-width: 250px;
float: left;
padding-top:15px ;
padding-right: 55px;
padding-bottom: 15px;
}
</style>
</head>
<body>
<p>花开再美，怎如初见？
<img src="3.jpg"/>
</p>
</body>
</html>
2. 文字环绕效果
使用 float 属性能实现文字环绕效果；
float 属性主要定义元素在哪个方向浮动；
一般应用于图像，使文本环绕在图像周围，也能定义其他元素浮动；
浮动元素会生成一个块级框，不论它本身是何种元素；若浮动元素非替换元素，则要指定一个明确的值；否则，他们尽可能地窄；
语法格式如下所示：
float:none |left |right
例子 2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字环绕</title>
<style>
img{
max-width: 185px;
float: left;
}
</style>
</head>
<body>
<p>花开再美，怎如初见？
<img src="3.jpg"/>
</p>
</body>
</html>
以上就是直播带货源码，CSS 3之图文混排效果， 更多内容欢迎关注之后的文章
标签：元素,设置,float,padding,直播,内边,图文混排,CSS,left From： https://www.cnblogs.com/yunbaomengnan/p/16911283.html