<div class="miniboxStandard">
  <h3 class="miniName">Female Human Archer</h3>
  <div class="box-inner">
    <p>Gap when zoomed</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>
<div class="miniboxStandard mini2">
  <h3 class="miniName">Female Human Archer</h3>
  <div class="box-inner">
    <p>No Gap when zoomed</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>

<div class="miniboxStandard mini3">
  <h3 class="miniName">Female Human Archer</h3>
  <div class="box-inner">
    <p>No Gap when zoomed</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>

.miniboxStandard {
	float: left;
	width: 208px;
	border: 3px solid #808080;
	border-radius: 4px;
	margin: 0 0 8px 8px;
	background-color: #eef;
	box-sizing: border-box;
	text-align: center;
	overflow:hidden;
}
.miniName {
	background: #414141;
	color: white;
	font-weight: bold;
	text-align: center;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	padding:7px 5px;
	line-height:1.4;
	margin:0;
	font-size:1rem;
}
.box-inner {
	padding:1px 0;
}
/* changes for second example */
.mini2 {
	border:none;
	box-shadow:inset 0 0 0 3px #808080;
}
.mini2 .miniName {
	padding:7px 5px 7px;
	border: 3px solid #808080;
	border-bottom:none;
}
.mini2 .box-inner {
	padding:1px 3px 4px;
}


/* changes for third example */
.mini3{border:none;overflow:visible;border-raidus:none;}
.mini3 .miniName {
	padding:7px 5px 7px;
	border: 3px solid #808080;
	border-bottom:none;
	border-radius:4px 4px 0 0;
}
.mini3 .box-inner {
	border:3px solid #808080;
	border-top:none;
	border-radius:0 0 4px 4px;
}