HTML5/CSS3登录页：调整Login按钮不影响标题文本的方法咨询

嘿，我看了你的代码和问题，这是个很常见的布局小坑——咱们来一步步搞定它！

问题根源 #

你之所以调整按钮margin时会影响到<h1>标题，主要是因为：

1. 按钮的父元素<form>是默认的块级元素，按钮的margin会间接影响form的布局空间，进而带动相邻的<h1>位置变化；
2. 你用了<h1 align="center">这种过时的HTML属性，它和CSS布局容易产生冲突，导致布局行为不可控。

几种靠谱的解决方案 #

方案1：给表单设置独立布局（最推荐） #

咱们给<form>加一点CSS，让它成为一个独立的容器，按钮的margin只会在表单内部生效，完全不会波及标题。修改后的完整CSS如下：

html {
  background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
  background-repeat: no-repeat;
  min-height: 100%;
  background-size: cover;
}

/* 给表单加独立布局 */
form {
  margin: 0;
  padding: 0;
  /* 可选：如果想让按钮在表单里居中，就加这行 */
  text-align: center;
}

h1{
  color: #ffffff;
  font-size: 40px;
  margin-top: 20px;
  /* 用CSS替代过时的align属性 */
  text-align: center;
}

#Login{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  background-color: #0095f0;
  display: inline-block;
  border: none;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
  /* 注意：原来的size属性无效，改成font-size */
  font-size: 15px;
  /* 这里随便加你需要的margin，只会影响按钮在表单内的位置 */
  margin-top: 30px;
  margin-left: 20px;
}

方案2：用绝对定位让按钮脱离文档流 #

如果你希望按钮彻底“飘”在页面上，完全不影响其他元素的布局，可以用绝对定位：

html {
  background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
  background-repeat: no-repeat;
  min-height: 100%;
  background-size: cover;
}

body {
  /* 给body加相对定位，让按钮的绝对定位基于页面 */
  position: relative;
  margin: 0;
  padding: 0;
}

h1{
  color: #ffffff;
  font-size: 40px;
  margin-top: 20px;
  text-align: center;
}

#Login{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  background-color: #0095f0;
  display: inline-block;
  border: none;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
  font-size: 15px;
  /* 绝对定位，脱离正常文档流 */
  position: absolute;
  top: 20px;
  left: 50px;
  /* 可以自己调整top/left/right/bottom来定位 */
}

方案3：用Flexbox做灵活布局（现代前端常用） #

如果需要更灵活的按钮位置控制，比如让按钮靠右、靠左或者居中，用Flexbox是最好的选择：

html {
  background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
  background-repeat: no-repeat;
  min-height: 100%;
  background-size: cover;
}

form {
  /* 开启Flex布局 */
  display: flex;
  /* 比如让按钮靠右，改成center就是居中，flex-start就是靠左 */
  justify-content: flex-end;
  padding: 20px;
}

h1{
  color: #ffffff;
  font-size: 40px;
  margin-top: 20px;
  text-align: center;
}

#Login{
  /* 简化padding写法：上下10px，左右20px */
  padding: 10px 20px;
  text-align: center;
  background-color: #0095f0;
  border: none;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
  font-size: 15px;
}

额外的小优化 #

• 把<h1 align="center">改成CSS的text-align: center，这是HTML5推荐的标准写法；
• 移除页面末尾的<img>标签，因为你已经在<html>里设置了背景图，这个img会重复显示，影响页面美观；
• 按钮样式里的size: 15px是无效的，换成font-size: 15px才能控制文字大小。

内容的提问来源于stack exchange，提问作者Elitezen