div コンテナー間のスペースを削除するにはどうすればよいですか (赤の境界線を持つ下部の div にあります)。以下は私のスニペットで、私はMaterializecssを使用しています
/*############################ LOGIN STYLE ############################*/
body{
font: normal 15px "Roboto", sans-serif;
font-size: 15px;
padding: 0px;
margin: 0px;
background: #ebebeb;
}
a{text-decoration: none;}
h1, h2, h3, h4, h5{font-family: 'mpsemibold', sans-serif;}
a, .transation{
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.extend{max-width: 100%;max-height: 100%;}
.clear{clear: both; float: none;}
.center{margin-left: auto; margin-right: auto;}
.thehide{display: none;}
.align_left{float: left;}
.align_right{float: right;}
.display_table{display: table;}
.inline{display: inline-block;}
.bgwhite{background: #fff;}
/* ###################### start ###################### */
/* header */
#topheader{
background: #7d7d7d;
padding: 15px;
}
.logo_wrapper, .menu_wrapper{
width: 80%;
}
.logo{
display: table;
margin-bottom: 10px;
}
/* navigation */
#topnav{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li{
float: left;
}
#topnav li a{
display: block;
padding: 5px 8px;
color: #e5e5e5;
text-transform: uppercase;
}
#topnav li a span{
float: left;
display: block;
}
#topnav li a span:first-child{
margin-right: 3px;
}
#topnav li a span:last-child{
padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
color: #fff;
}
#mobile_nav{
top: 80px;
left: 20px;
position: fixed;
z-index:99999;
}
/* dropdown */
#topnav .dropdown_menu{
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
border-top: 2px solid #fff;
}
#topnav .dropdown_menu li{
clear: both;
float: none;
}
#topnav .dropdown_menu a{
clear: both;
float: none;
display: block;
padding: 5px 8px;
font-size: 13px;
}
.side-nav li a{
text-transform: uppercase;
}
/* dropdown */
#topnav .dropdown_menu{
}
#topnav .dropdown_menu li{
clear: both;
float: none;
}
#topnav .dropdown_menu a{
clear: both;
float: none;
}
/* right option */
.right_option_wrapper ul{padding: 0px; margin: 0px;}
.right_option_wrapper ul li{
float: left;
margin: 0px 5px;
}
.right_option_wrapper ul:first-child{
margin-right: 15px;
}
.right_option_wrapper ul li a{
color: #fff;
font-size: 25px;
}
#idty a{
font: normal 15px 'Roboto', sans-serif;
color: #fff;
padding-top: 7px;
display: block;
}
#idty a span{
float: left;
}
#idty a span:first-child{
margin-right: 3px;
}
.right_option_wrapper img{
-webkit-border-radius: 5000px;
-moz-border-radius: 5000px;
border-radius: 5000px;
}
/* boxes */
#boxes{
padding: 7px;
}
.box{
background: #76b729;
margin: 5px;
width: 23%;
color: #fff;
padding: 10px 15px;
height: 90px;
}
.box_content_container{
padding-top: 7px;
}
.box .icon{
font-size: 4em;
color: #fff;
display: block;
margin-right: 10px;
}
.box h1, h2{text-transform: uppercase; text-align: left; color: #fff; clear: both;}
.box h1{
padding: 0px;
margin: 0px 0px 3px 0px;
font: 400 30px 'Roboto', sans-serif;
}
.box h1 span{
float: left;
font: 400 30px 'Roboto', sans-serif;
display: block;
}
.box h1 span:last-child{
color: rgba(255,255,25,0.5);
font: 300 15px 'Roboto', sans-serif;
padding-top: 3px;
}
.box h2{
margin: 0px;
padding: 0px;
font: 400 10px 'Roboto', sans-serif;
}
/* announcement and workflow */
#second_container .s6{
width: 49.5%;
padding: 7px;
}
#second_container .col:first-child{
margin-right: 5px !important;
}
.title_header{
font: 500 18px 'Roboto', sans-serif;
padding: 3px 5px;
color: #263238;
overflow: auto;
margin: 0px;
border-bottom: 1px solid #76b729;
display: table;
position: relative;
color: #76b729;
}
.title_header span{
float: left;
display: block;
padding: 0px;
}
.title_header span:first-child{
margin-right: 7px;
}
.content{
border-top: 1px solid #ccc;
margin-top: -1px;
padding: 0px;
}
.content_content{
border-bottom: 1px solid #ccc;
padding: 5px;
padding: 0px;
margin: 0px;
}
.content_content h1{
font: 500 15px 'Roboto', sans-serif;
color: #6c6c6c;
padding: 0px 0px 3px 0px;
text-align: left;
border: 1px solid red;
overflow: auto;
}
.content_content h1 span{
float: left;
display: block;
text-align: left;
}
.content_content h1 span:first-child{
margin-right: 3px;
}
.content_content p{
font: 300 13px 'Roboto', sans-serif;
color: #6c6c6c;
padding: 5px;
text-align: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- materialize -->
<script src="http://megamitch.ph/materializecss/js/materialize.min.js"></script>
<link href="http://megamitch.ph/materializecss/css/materialize.css" rel="stylesheet"/>
<!-- webfont -->
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body>
<div id="mainwrapper" class="row extend clear center">
<div class="col s12 extend clear" id="topheader">
<div class="clear extend">
<a id="mobile_nav" data-activates="mobile-demo" style="visibility: hidden;" class="btn-floating btn-large waves-effect waves-light green"><i class="mdi-content-add"></i></a>
<a href="index.html" class="left logo extend clear" title="MOT HRIS">Test</a>
<div class="right display_table right_option_wrapper">
<ul class="left extend">
<li><a href="#"><i class="ion-ios-help-outline"></i></a></li>
<li><a href="#"><i class="ion-ios-list-outline"></i></a></li>
<li><a href="#"><i class="ion-ios-information-outline"></i></a></li>
</ul>
<ul class="left extend ">
<li><a href="#"><img src="core/img/avatar.png" width="30" height="30"/></a></li>
<li id="idty">
<a href="#"><span>Corp</span><span class="mdi-navigation-arrow-drop-down"></span></a>
</li>
</ul>
</div>
</div>
<div class="extend clear nav-wrapper">
<ul class="nav extend clear" id="topnav">
<li><a href="index.html" title="home" class="active_menu">Home</a></li>
<li class="has_dp">
<a href="#" title="Company" class="xx"><span>Company</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="HR" class="xx"><span>HR</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li><a href="index.html" title="#">Assets</a></li>
<li><a href="index.html" title="#">Employees</a></li>
<li class="has_dp">
<a href="#" title="Expenses" class="xx"><span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="HR" class="xx"><span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="Recruitment" class="xx"><span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li><a href="index.html" title="#">reporting</a></li>
<li class="has_dp">
<a href="#" title="self service" class="xx"><span>self service</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li><a href="index.html" title="#">timesheets</a></li>
<li><a href="index.html" title="#">Timeoff</a></li>
<li class="has_dp">
<a href="#" title="training" class="xx"><span>training</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="more" class="xx"><span>more</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="index.html" title="home" class="active_menu">Home</a></li>
<li class="has_dp">
<a href="#" title="Company" class="xx"><span>Company</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="HR" class="xx"><span>HR</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li><a href="index.html" title="#">Assets</a></li>
<li><a href="index.html" title="#">Employees</a></li>
<li class="has_dp">
<a href="#" title="Expenses" class="xx"><span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="HR" class="xx"><span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="Recruitment" class="xx"><span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li><a href="index.html" title="#">reporting</a></li>
<li class="has_dp">
<a href="#" title="self service" class="xx"><span>self service</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li><a href="index.html" title="#">timesheets</a></li>
<li><a href="index.html" title="#">Timeoff</a></li>
<li class="has_dp">
<a href="#" title="training" class="xx"><span>training</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
<li class="has_dp">
<a href="#" title="more" class="xx"><span>more</span><span class="mdi-navigation-arrow-drop-down"></span></a>
<ul class="dropdown_menu extend clear thehide">
<li><a href="#">dropdown menu 1</a></li>
<li><a href="#">dropdown menu 2</a></li>
<li><a href="#">dropdown menu 3</a></li>
<li><a href="#">dropdown menu 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="clear extend" style="height: 15px;"></div>
<div class="col s6" id="left_container">
<div class="row clear bgwhite center" id="boxes">
<div class="extend inline_block left box">
<span class="icon ion-ios-people left extend"></span>
<div class="box_content_container extend left">
<h1>17</h1>
<h2>Employees</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-calendar left extend"></span>
<div class="box_content_container extend left">
<h1><span>1</span><span>5.9%</span></h1>
<h2>Time off today</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-android-calendar left extend"></span>
<div class="box_content_container extend left">
<h1>0%</h1>
<h2>ABSENCE RATE</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-calendar left extend"></span>
<div class="box_content_container extend left">
<h1><span>0</span><span>0%</span></h1>
<h2>UNAUTHORIZED TODAY</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-pie-graph left extend"></span>
<div class="box_content_container extend left">
<h1>65,369</h1>
<h2>TOTAL BENEFITS</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-stats-bars left extend"></span>
<div class="box_content_container extend left">
<h1>468,739</h1>
<h2>TOTAL SALARY</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-arrow-graph-up-right left extend"></span>
<div class="box_content_container extend left">
<h1>534,108</h1>
<h2>total cost</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-arrow-graph-up-right left extend"></span>
<div class="box_content_container extend left">
<h1>31,418</h1>
<h2>average cost</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-share left extend"></span>
<div class="box_content_container extend left">
<h1><span>0</span><span>0%</span></h1>
<h2>starters</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-share left extend"></span>
<div class="box_content_container extend left">
<h1><span>0</span><span>0%</span></h1>
<h2>leavers</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-android-list left extend"></span>
<div class="box_content_container extend left">
<h1><span>0</span><span>0%</span></h1>
<h2>training today</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-alert-circled left extend"></span>
<div class="box_content_container extend left">
<h1><span>0</span><span>0%</span></h1>
<h2>warnings</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-arrow-up-a left extend"></span>
<div class="box_content_container extend left">
<h1><span>0</span><span>0%</span></h1>
<h2>high performers</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-arrow-down-a left extend"></span>
<div class="box_content_container extend left">
<h1><span>0</span><span>0%</span></h1>
<h2>low performers</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-person-stalker left extend"></span>
<div class="box_content_container extend left">
<h1>0</h1>
<h2>users</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-document-text left extend"></span>
<div class="box_content_container extend left">
<h1>9</h1>
<h2>documents</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-ios-list left extend"></span>
<div class="box_content_container extend left">
<h1>2</h1>
<h2>open requisitions</h2>
</div>
</div>
<div class="extend inline_block left box">
<span class="icon ion-person left extend"></span>
<div class="box_content_container extend left">
<h1>2</h1>
<h2>candidates</h2>
</div>
</div>
</div>
<div class="row extend center" id="second_container">
<div class="col s6 bgwhite" id="announcement">
<h1 class="title_header extend clear"><span class="ion-speakerphone"></span><span>Announcement</span></h1>
<div class="row content extend clear">
<div class="content_content extend clear">
<h1><span>Sample badge</span><span>Sample Title</span></h1>
<p>This is the sample content of this post</p>
</div>
</div>
</div>
<div class="col s6 bgwhite" id="workflow">
</div>
</div>
</div>
<div class="col s6" id="right_container">
sdasd
</div>
</div>
</body>
</html>