Visibility Hidden Gaps

by joshuatz

HTML

<div>
Text one: Hello world! There should be no gap after me!... but there is because of visiblity:hidden...
</div>

<!-- Hidden using visiblity:hidden; -->
<div class="hidden">
	<div class="embed-fake"></div>
</div>

<div>
Text two: Hello again! There should be no gap before me (but there is) and no gap after (which there successfully is not, because of display:none;)
</div>

<!-- Hidden using display:none; -->
<div class="display-none">
	<div class="embed-fake"></div>
</div>

<div>
Text three: Hello for the final time! There should be no gap between myself and the previous paragraph.
</div>

CSS

.hidden {
	visibility: hidden;
}
.display-none {
	display: none;
}

/* Pretend that this is a dynamically generated embed element of fixed width and height */
.embed-fake {
	width: 300px;
	height: 150px;
}