如何分隔开div的文字和图片？
我想将article和图片群分开，请问如何？我试过分俩个section和设置div的外边距，但都无效的样子，始终是黏在一起的样子<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document1 </title>
<style>
body{
color:black;
background: white;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
width:auto;
}
header{
background:gray;
margin: 20px 40px 20px 50px;
width:auto;
}
section{
background:pink;;
color:black;
width:auto;
display:flex;
flex-direction:row;
height:700px;
}
article{
text-align: center;
position: absolute;
font-size:xxx-large;
width:100%;
height:59px;
margin:10px;
}
div{
display:inline-block;
direction:row;
margin:20px;
}
#fjpg{
margin:10px;
width:40px;
height:20px;
position:absolute;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
display:inline-block;
margin:10px;
width:auto;
color:white;
}
footer{
background:lightblue;
height:40px;
}
</style>
</head>
<body>
<h1>let`s start it</h1>
<header>
<nav>
<ul>
<li>Google Artists & Culture</li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li>Home </li>
<li>Explore</li>
<li>Nearby</li>
<li>Favorite</li>
<li><img src="download.png" height=20px; width:10px;></li>
</ul>
</nav>
</header>
<section>
<section>
<div><article>Artist-Ting</article></div>
<div class="fjpg"><img src="/ting1.jpg" alt="ting-logotingting" height="150px" width="300px"></div>
<divclass="2ndjpg"><img src="/ting2.jpg" alt="ting2-logotingting" height="150px" width="300px"></div></section>
</section>
<footer>footer</footer>
</body>
</html> 内边距呢？
页:
[1]