Issue
Just like the title, I want a box with size 320px*40px, with 4 smaller boxes, size 80px*40px, and with no margin or padding. I used * { margin: 0; padding: 0; }, but the margin is still there.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 40px;
width: 320px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box .minibox {
padding: 0;
margin: 0;
text-decoration: none;
display: inline-block;
font-size: 12px;
color: #4C4C4C;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
}
.box .minibox:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="minibox">guideline</a>
<a href="#" class="minibox">guideline</a>
<a href="#" class="minibox">guideline</a>
<a href="#" class="minibox">guideline</a>
</div>
</body>
</html>I tried to add margin: 0; padding: 0; in the selector of the tag, but nothing happened.
Solution
It is because of how inline-block elements behave when there is a new-line between them. The new-line is treated as a white-space and that is why you are seeing this gap between a-tags.
Just remove the new-line between the a-tags and there will be no space between them:
* {
margin: 0;
padding: 0;
}
.box {
height: 40px;
width: 320px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box .minibox {
padding: 0;
margin: 0;
text-decoration: none;
display: inline-block;
font-size: 12px;
color: #4C4C4C;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
}
.box .minibox:hover {
background-color: #edeef0;
color: #ff8400;
}<!--
Notice the last > is moved to next line which
doesn't render a new-line character between a-tags
-->
<div class="box">
<a href="#" class="minibox">guideline</a
><a href="#" class="minibox">guideline</a
><a href="#" class="minibox">guideline</a
><a href="#" class="minibox">guideline</a>
</div>
<!--
Or put all a-tags on same line
-->
<div class="box">
<a href="#" class="minibox">guideline</a><a href="#" class="minibox">guideline</a><a href="#" class="minibox">guideline</a><a href="#" class="minibox">guideline</a>
</div>
<!-- It is the same with letters with new-line between -->
<div>
hello
h
e
l
l
o
</div>Answered By - Bqardi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.