There are two div elements with display: table-cell property:
<div>
This is a table cell
</div>
<div>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
</div>
CSS
div {
display: table-cell;
background-color: blue;
padding: 0 20px;
}
div:nth-child(1) {
background-color: red;
padding: 0 20px;
}
However, the first div's content seems to have an extra space at the top due to the use of display-table. Although there is no computed margin when inspecting the element, there is visible space between the content and the top of the div in the jsfiddle. I am looking for a way to eliminate that space.
Thank you in advance!