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

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 ，结果为：

我希望公司注册排在最前面。

我发现许多线程给出答案：

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我希望将“问题” h1对齐到左div的顶部。

Answer 1

h1标签具有默认边距。 尝试将其设置为0px。

h1{
  margin:0px;

}

Answer 2

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

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

Answer 3

你是这个意思？ 请下次发布您的HTML标记！

 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演示