Html 保证金是首要问题。当我添加更多代码时，我的所有图像都会移动，当我尝试将它们移回原处时，它们都会同时移动_Html_Css

Html 保证金是首要问题。当我添加更多代码时，我的所有图像都会移动，当我尝试将它们移回原处时，它们都会同时移动

html css

Html 保证金是首要问题。当我添加更多代码时，我的所有图像都会移动，当我尝试将它们移回原处时，它们都会同时移动,html,css,Html,Css,因此，在尝试通过更改“页边空白顶部”来移动站点上的一幅图像时，而不是仅移动该图像，所有图像都会移动你可以在这里捣乱。此外，如果你认为我应该做任何其他事情来改善它，请说。背景设置是有原因的这是HTML代码 <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <div id="header">

因此，在尝试通过更改“页边空白顶部”来移动站点上的一幅图像时，而不是仅移动该图像，所有图像都会移动

你可以在这里捣乱。

此外，如果你认为我应该做任何其他事情来改善它，请说。背景设置是有原因的

这是HTML代码

<!DOCTYPE html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<div id="header">
    <img id="logo" src="/images/hymn-logo.png" style="width:476px;height:174px;">
</div>

<div id="content">
    <img id="username" style="width:247px;height:43px;">
    <img id="password" style="width:247px;height:43px;">
    <input type="image" id="request-password" src="/images/request-password.png" style="width:248px;height:36px;">

    <form id="form" action="login.php" method="post" enctype="multipart/form-data">
    <input type="image" id="login" name="login" src="/images/login.png" style="width:248px;height:36px;">
    <input type="text" id="username-text" name="username" placeholder="Username" style="width:150px;height:45px;">
    <input type="password" id="password-text" name="password" placeholder="********" style="width:150px;height:45px;">
    </form>

</div>
</html>

我试过很多东西，但都没用。谢谢。

你的

身体标签在哪里？只是添加了它，没有解决它。什么也没变。如果你进入我的网站，右键点击并按下Google Chrome上的“Inspect Element”，然后尝试将页边距top:px更改为另一个数字，你就会明白我的意思（@WesFoster-Likehtml
和head
标记，body
标记是可选的。@Spewni您将body的起始标记放在了错误的位置。不管怎样，您试图移动哪些图像？这可能是折叠式边距的问题。给其父图像一个填充，而不是边距。好吧，我仍然有问题。是吗我以前对崩溃的边距感到不安，并试图修复它，但没有成功。：l似乎没有人知道。我需要将网站上的所有图像从徽标/背景中移开。我的意思是，它们目前的位置不错，但它们随机地乱了套，然后我花了很长时间才能让它们恢复到现在的状态，因为它们都决定随机移动一个图标不同时。（所以当我尝试向上移动一个时，所有5个都向上移动）你的主体标记在哪里？只是添加了它，没有解决它。没有更改任何内容。如果你到我的网站，右键单击并按Google Chrome上的“Inspect Element”，然后尝试将页边空白顶部：px更改为另一个数字，你就会明白我的意思了（@WesFoster-Likehtml
和head
标记，body标记是可选的。@Spewni您将body的起始标记放在了错误的位置。不管怎样，您试图移动哪些图像？这可能是折叠式边距的问题。给其父图像一个填充，而不是边距。好吧，我仍然有问题。是吗我以前对崩溃的边距感到不安，并试图修复它，但没有成功。：l似乎没有人知道。我需要将网站上的所有图像从徽标/背景中移开。我的意思是，它们目前的位置不错，但它们随机地乱了套，然后我花了很长时间才能让它们恢复到现在的状态，因为它们都决定随机移动一个图标t同时。（因此，当我尝试向上移动一个时，所有5个都向上移动）
body {
    background-image: url("/images/background.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #1B1D1F;
}

#logo {
    text-align:center;
    display:block;
    margin-top: 35px;
    margin: 0 auto;
    overflow: scroll;
    outline: none;
}

#login {
    margin-top: -73px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    outline: none;
    padding: 1px;
}

#request-password {
    margin-top: 49px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    outline: none;
    padding: 1px;
}

#username {
    background-image: url("/images/text-input.png");
    margin-top: 194px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    outline: none;
    content: '';
}

#password {
    background-image: url("/images/text-input.png");
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    outline: none;
    content: '';
}

#username-text {
    margin-top: -147px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: transparent;
    border: transparent;
    outline: none;
    background-repeat: no-repeat;
    color: #FFF;
    text-align:center;
    position: relative;
    padding: 1px;
}

#password-text {
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: transparent;
    border: transparent;
    outline: none;
    background-repeat: no-repeat;
    color: #FFF;
    text-align:center;
    position: relative;
    padding: 1px;
}