gpt4 book ai didi

html - 为什么插入图像会使页面向左移动

转载 作者:行者123 更新时间:2023-11-28 03:34:16 27 4
gpt4 key购买 nike

大家好,我有一个问题,就是为什么当我插入图片时我网站的整个页面会稍微向左移动(10 - 30 像素左右),而当我删除它时又恢复正常。感谢您提供任何帮助。

HTML 代码-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta name="description" content="Random Text">
<meta name="keywords" content="Random words">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<title>X</title>
<link href="menusheet.css" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
<div id="wrapper">
<!-- Black Menu -->
<div id="menu_wrapper" class="black">
<div class="left"></div>
<ul id="menu">
</div>
</div>

<div id="content">
<div id="container">
<div id="adsense">

</div>

<div id="stepsbox">
</div>
</div>

<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
</div>
<div id="footer">
<div id="footerleft">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sitemap.html">Site Map</a></li>
</ul>
</div>
<div id="footercenter">
&copy; 2013 x.com
</div>
</div>

CSS - 

body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}


#wrapper {
width: 960px;
margin: 0 auto;
}

#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}

#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}

#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}

#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}

#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}

#footer {
height: 60px;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}

#footerleft {
width: 300px;
height: 50px;
float: left;
}

#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}

最佳答案

看不到你的图片...:D,但是我在你的地方插入了这段代码

img{
margin: 0px;
padding: 0px;
border: 0px;
}

这会删除图像标签周围的所有空格...尝试一下并期待...它,如果您插入图像链接,将不胜感激... :)易于理解

关于html - 为什么插入图像会使页面向左移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15402665/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com