HTML/CSS 格式问题。答案

【问题标题】：HTML/CSS formatting trouble.HTML/CSS 格式问题。
【发布时间】：2016-08-19 02:55:25
【问题描述】：

所以我用 ionic 制作了一个简单的应用程序，并且正在格式化我的 css 和 html。我正在努力使我的应用程序看起来非常好。它现在只有一个输入文本字段和一个输入按钮。我的边距/填充很难，不确定。这是我的代码：

.title {
    background-color: #e6ffff;
}
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    vertical-align: middle;
    display: inline-block;
    border: none;
    text-align: center;
    width: 100%;
    margin-top: 15px;
}

div {
    margin-top: 50px;
    margin-left: 120px;
    margin-right: 120px;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 15px;
}

<body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Push Notifications</h1>
      </ion-header-bar>
      <ion-content>
          <div ng-controller="myCtrl">
              <form>
                <input type="text" class="messageText" placeholder="Message" ng-model="messageText">
                <input type="submit" ng-click="submit()">
              </form>      
          </div>
      </ion-content>
    </ion-pane>
  </body>

Picture of the app running in the browser

看到灰色很奇怪而且标题也缺少一些颜色吗？我需要一些帮助来解决这个问题。另外，我不介意一些关于使应用程序看起来专业的 CSS 技巧！提前致谢！:)

【问题讨论】：

打开浏览器控制台，查看盒子模型和应用的 CSS 规则，这些元素没有正确显示。
我刚刚检查了控制台，它并没有为我解决问题
请提供一个js小提琴。

标签： javascript android html css

【解决方案1】：

好的，所以问题在于如何在 DOM 中放置东西。最快的解决方案是将样式添加到表单中，并从包装它的 div 中取出一些样式。

form{
 background:pink;
 background-color: #f2f2f2;
 padding:15px;
 border-radius: 5px;
}
div {
 margin-top: 50px;
 margin-left: 120px;
 margin-right: 120px;
 padding: 15px;
}

盒子模型快速参考：https://css-tricks.com/the-css-box-model/

【讨论】：

【解决方案2】：

除了来自@Aldose 的答案...要修复具有边距的标题，您可以试试这个。

body , html
{
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
}

.title {
  background-color: #e6ffff;
  padding:0px;
  margin:0px;
}

【讨论】：