Question

我有同样的问题。

.mainDiv {
    border-spacing: 15px;
}

.formDiv {
    width: 300px;
    background-color: #F5F6CE;
    padding: 10px;
    margin-left: 20px; 
    display: table-cell;
    vertical-align: top;
}

.resultDiv {

    background-color: #F5F6CE;
    padding: 20px;
    box-shadow: 5px 5px 5px #888888;
    margin-left: 20px;
    display: table-cell;
    width: 100%;
}

现在，我想将<h1>添加到formDiv，结果是：

enter image description here

我希望公司注册与顶部保持一致。

我找到了许多线程给出答案：

vertical-align: top;

但它不适合我。请帮忙。

HTML是：

<div class="mainDiv">
        <div class="formDiv" align="center">

            <h1 align="center">Company Registration</h1>

            <form id="compReg" onsubmit="SaveData();return false;">
                <Table align="center" cellspacing="5px">
                    <tr>
                        <td>
                        <Input id="txtEmail" type="email" class="text" placeholder="Contact Email"  />
                        </td>
                    </tr>
                    <!-- other input types -->

                    <tr>
                        <td>
                        <Input type="submit" value="Submit" />
                        &nbsp; &nbsp; &nbsp;
                        <Input type="reset"/>
                        </td>
                    </tr>

                </table>

            </form>
        </div>

        <div class="resultDiv" id="result">
            <div align="right">
                <input type="button" onclick="clearData()" value="Clear" />
                <br>
                <br>
            </div>
            <table class="dataTable" width="300">
                <thead>
                    <th width="20px">Id</th>
                    <th width="250px">Email</th>

                    <!-- other headers -->

                    <th width="50px">Color</th>

                </thead>

                <tbody id="tbody">

                </tbody>
            </table>
        </div>

    </div>

检查JSFiddle我想要＆＃34;问题＆＃34; h1在左边div的顶部对齐。

Answer 1

h1标签有默认保证金。尝试将其设置为0px。

h1{
  margin:0px;

}

Answer 2

尝试重置默认表填充和边距值

#yourtable {
   margin: 0;
   padding: 0;
}

Answer 3

你是说这个意思吗？请在下次发布您的HTML-Markup！

h1 { margin:0; background: blue; }
.formDiv {
  width: 300px;
  background-color: #F5F6CE;
  margin-left: 20px;
  padding: 0 10px 10px 10px;
  display: table-cell;
}

<div class="wrapper">
  <div class="formDiv">
    <h1>Lorem</h1>
    <p>ipsum dolor</p>
    <input name="test" type="text">
  </div>
</div>

看看你的小提琴：http://jsfiddle.net/xsmzLb3g/2/

您必须更改h1和div的边距/填充。

Answer 4

从我的理解，如果您正在使用表并尝试解决表格单元格间距问题。尝试使零间隔和细胞填充。

<table cellpadding="0" cellspacing="0">

CSS到H1间距

table h1{ margin:0; padding:0; }

JSFIDDLE DEMO

从表格单元格中删除顶部填充

4 个答案: