JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<body>
    <h1>relative positioning with negative top margin</h1>
    <!--<div class="container">-->
    <div class="section">
        <!--<img src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg" />-->
        <div>
            <p>
                paragraph in a div, in a div.section, in a div.container.
                margin-top: 0; to -3.5em t0 -8em.
            </p>
        </div>
    </div>
    <!--</div>-->
</body>

CSS

body:before {
	content: 'relative positioning negative margin.css';
	display: block;
	float: right;
	margin-right: 1em;
}
p {
	margin: 0;
}
/*Sections*/
.section{
	position: relative;
	display: inline-block;
	width: 300px;
	margin: 0;	padding: 0;
	/*for checking alignment*/
	background-image: repeating-linear-gradient(transparent, transparent calc(12.5% - 1px),
																		black calc(12.5% - 1px), black calc(12.5% + 1px));
	height: 290px;
	outline: 3px dotted red;
}
.section:before {
	color: red;	
	content: 'section';
	display: inline-block;
	position: absolute;
	top: 0; left: 0;
	border-bottom: 3px dotted red;
}
	/*text blocks in sections*/
	.section div {
		display: inline-block;
		margin: 0;
		/*padding: 0 1em;*/
		padding: 1em;
		position: relative;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		top: 50%;
		outline: 1px solid #4cff00;
	}
		.section div:before {
			content: 'padding: 1em';
			position: absolute;
			right: 0; bottom:0;
			display: block;
			color: silver;
			opacity: 0.5;
		}
		.section div:after {
			content: 'padding: 1em';
			position: absolute;
			left: 0; top:0;
			display: block;
			color: silver;
			opacity: 0.5;
		}
	.section div p{
		/*margin-top: -33.3%;*/
		outline: 1px dotted black;
		background-image: repeating-linear-gradient(#00ffff, #00ffff 24.5%,
																			black 24.5%, black 25.5%);
		}
	.section div p {
		-moz-animation-duration: 4s;
		-o-animation-duration: 4s;
		-webkit-animation-duration: 4s;
		animation-duration: 4s;
		-moz-animation-timing-function: ease-in-out;
		-o-animation-timing-function: ease-in-out;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-moz-animation-name: rel-margin;
		-o-animation-name: rel-margin;
		-webkit-animation-name: rel-margin;
		animation-name: rel-margin;
		-moz-animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-webkit-animation-iteration-count:...