css snippet to prevent extra top margin of top elements within .mui-panel

[englishextra]

Well as you know if you place say H2 as a first child within .mui-panel, there'll be an extra top margin space
as compared with the bottom margin space.

-----.mui-panel-------
|
|
H2 blabla /H2
|
-----------------------

This applies not only to H2, but some other elements/tags.

To fix that so that to make it look consistent like so:

-----.mui-panel-------
|
H2 blabla /H2
|
-----------------------

I use (and I don't insist on that solution. but for me it works fine):

/*!
 * fix top margin of first child
 * @see {@link https://github.com/muicss/mui/issues/278}
 */

.mui-panel *[class*=mui-col-md-] h1:first-child,
.mui-panel *[class*=mui-col-md-] h2:first-child,
.mui-panel *[class*=mui-col-md-] p:first-child	{
	margin-top: 0.938rem;
}

.mui-panel *[class*=mui-col-md-]:first-child h1:first-child,
.mui-panel *[class*=mui-col-md-]:first-child h2:first-child,
.mui-panel *[class*=mui-col-md-]:first-child p:first-child {
	margin-top: 0;
}

@media (min-width: 544px) {
	.mui-panel *[class*=mui-col-md-] h1:first-child,
	.mui-panel *[class*=mui-col-md-] h2:first-child,
	.mui-panel *[class*=mui-col-md-] p:first-child	{
		margin-top: 0.938rem;
	}

	.mui-panel *[class*=mui-col-md-]:first-child h1:first-child,
	.mui-panel *[class*=mui-col-md-]:first-child h2:first-child,
	.mui-panel *[class*=mui-col-md-]:first-child p:first-child {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.mui-panel *[class*=mui-col-md-] h1:first-child,
	.mui-panel *[class*=mui-col-md-] h2:first-child,
	.mui-panel *[class*=mui-col-md-] p:first-child {
		margin-top: 0.938rem;
	}

	.mui-panel *[class*=mui-col-md-]:first-child h1:first-child,
	.mui-panel *[class*=mui-col-md-]:first-child h2:first-child,
	.mui-panel *[class*=mui-col-md-]:first-child p:first-child {
		margin-top: 0;
	}
}

@media (min-width: 992px) {
	.mui-panel *[class*=mui-col-md-] h1:first-child,
	.mui-panel *[class*=mui-col-md-] h2:first-child,
	.mui-panel *[class*=mui-col-md-] p:first-child	{
		margin-top: 0;
	}
}

@media (min-width: 1200px) {
	.mui-panel *[class*=mui-col-md-] h1:first-child,
	.mui-panel *[class*=mui-col-md-] h2:first-child,
	.mui-panel *[class*=mui-col-md-] p:first-child	{
		margin-top: 0;
	}
}

ATTENTION: This will work for:

<div class="mui-panel">
  <div class="mui-col-xs-12 mui-col-md-12 mui-col-lg-6 mui-col-xl-6"></div>
  <div class="mui-col-xs-12 mui-col-md-12 mui-col-lg-6 mui-col-xl-6"></div>
</div>

and it won't for:

<div class="mui-panel">
  <div class="mui-col-xs-12 mui-col-md-12 mui-col-lg-6 mui-col-xl-3"></div>
  <div class="mui-col-xs-12 mui-col-md-12 mui-col-lg-6 mui-col-xl-3"></div>
  <div class="mui-col-xs-12 mui-col-md-12 mui-col-lg-6 mui-col-xl-3"></div>
  <div class="mui-col-xs-12 mui-col-md-12 mui-col-lg-6 mui-col-xl-3"></div>
</div>

So it's not an issue, rather an experience.

Thanks