Radek Kucera Radek Kucera - 5 months ago 29
HTML Question

CSS and HTML: Remove space between DIVs in given code

I have the following HTML:

<html>
<head>
<style>
.div-message {
vertical-align: top;
width: 1020px;
text-align: center;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: #DCDCDC;
margin-left: auto ;
margin-right: auto ;
}

.msgbox {
height: 60px;
width: 100%;
position: relative;
box-sizing: border-box;
padding: 5px 5px 5px 5px;
font-size: 12px;
font-weight: normal;
display: inline-block;
border-radius: 1px;
font-family: 'Helvetica', cursive;
color: black;
text-decoration: none;
background-color: white;
border-bottom: 4px solid #2980B9;
margin-bottom: 10px;
border: 2px solid blue;
outline: 0;
}

/* tabs support */
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
text-align: center;
padding-top: 1px;
padding-left: 20px;
padding-right: 20px;
background: #DCDCDC;
margin-left: auto ;
margin-right: auto ;
border-bottom:0px;
width: 1020px;
}

ul.tab li {float: left;}

ul.tab li a {
display: inline-block;
color: black;
text-align: center;
vertical-align: top;
padding: 10px 10px;
text-decoration: none;
font-size: 14px;
border-bottom:0px;
text-align: center;
margin-top:0;
margin-bottom:0;
}

ul.tab li a:hover {background-color: #ddd;}

ul.tab li a:focus, .active {background-color: #ccc;}

.tabcontent {
display: none;
padding: 10px 10px;
border: 0px none #ccc;
border-top: none;
vertical-align: top;


}
</style>
</head>
<body>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<ul class="tab">
<li><a href="#" class="tablinks" onclick="openTab(event, 'Tab1')">Messages</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'Tab2')">Options</a></li>
</ul>
<div id="Tab1" class="tabcontent">
<div class='div-message'>
<textarea name='msgText' id='msgTextId' title='Messages' class='msgbox' readonly>Done!</textarea>
</div>
</body>
</html>


It is kind of tabbed panel with two tabs: MESSAGES and OPTIONS. When I click on MESSAGES a message box appears. Menu and message box should appear with grey background. It does appear. But how do I remove white space between menu and DIV, which contains message box?

Answer

The parent .tabcontent has the following padding :

padding: 10px 10px;

Remove the top padding, or give it the same background color to get rid of the space.