This question already has an answer here:
why float & inline-block cause different vertical type?
(1 answer)
Closed 1 year ago.
Q. How do I remove the extra space at the bottom of the div#inlineblock? Why is it there?
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
I appreciate good references. :P
Thanks.
So what's happening here is that your <hr /> has a margin (as is normal for <hr /> elements) and it's being treated differently.
In the case of #block, it's being subject to margin collapsing but in #inlineblock it isn't.
You can resolve this by specifying margin-bottom:0 on your hr elements.
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
margin-bottom: 0; /* NEW */
}
div#inlineblock {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
You'll notice this now pushed the two elements together, so you may need to add a margin-bottom to your divs depending on the exact effect you want.
The space at the bottom of #inlineblock is actually the margin of the hr. If you reset that margin, you'll see the 'space' disappear.
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}
#inlineblock hr {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
margin-bottom(and top) default for hr element is 8px, you must set it to 0px.
#inlineblock hr {
margin-bottom: 0;
}
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
#inlineblock hr {
margin-bottom: 0;
}
div#inlineblock {
display: inline-block;
}
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
You can also use the following:
div#inlineblock {
margin-top: 0px;
}
Related
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I want to lift the navigation links in my header section. They all are in a div class "links" which is under div class "headers".
But the margin-bottom property doesn't have any impact.
So to check whether there is any change in position I made the border around the div class "links".
But when border appeared all the navigation links are shown out of the box.
Also there is no impact of margin-bottom on the border box.
Jsfiddle: http://jsfiddle.net/L2k67eyx/
PLEASE let me know whats wrong with my code? Also is there any rules I must know when does margin properties work?
CODE Snippet:
body{
height: 100vh;
margin: 0px;
}
.header{
background-color: white;
height:50%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
.content{
position: relative;
background-color: white;
height: 90%;
overflow-y: auto;
}
.logo{
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-bottom: 10px;/*NOT WORKING*/
/*right: 100px;*/
border-style:solid;
border-color: black;
outline-style: solid;
outline-color: green;
}
a{
position: relative;
right: 0px;
top: 25px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home Page</title>
<style type="text/css">
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img id="logo"src="logo.png" alt="Logo">
</div>
<div class="links">
Home
Offers
Login
Register
Contact
About
</div>
</div>
<div clear="both"></div>
<div class="content">
</div>
<script type="text/javascript" src="home.js"></script>
</body>
</html>
you should to remove margin top:0px in tag a style to be
a{
position: relative;
right: 0px;
top: 0px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
the html object is floating above the redbox div. How can i keep it inside the redbox div. I tried several options like reverse the divs. Somehow object is acting diverend then for example img tags. I don't know why, Search on the internet and didn't found a solution. I hope someone can help me and explain me what i'm doing wrong.
.redbox{
background-color: red;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
padding: 4px;
transition: border 0.2s ease-in-out 0s;
width:25%;
height: 200px;
}
.redbox object {
position:absolute;
top:0;
left:0;
width:100%;
height:25%;
}
.redbox .caption {
color: #333;
padding: 9px;
}
<html>
<head>
</head>
<body>
<div class="redbox">
<object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object>
<div class ="caption">
here is some text
</div>
</div>
</body>
I think you can use Z-Index Property.
Here i am providing modified code please check it once.
.redbox{
background-color: red;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
padding: 4px;
transition: border 0.2s ease-in-out 0s;
width:25%;
height: 200px;
z-index : 1;
}
.redbox object {
position:absolute;
top:0;
left:0;
width:100%;
height:25%;
z-index:-1;
}
.redbox .caption {
color: #333;
padding: 9px;
}
<html>
<head>
</head>
<body>
<div class="redbox">
<object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object>
<div class ="caption">
here is some text
</div>
</div>
</body>
</html>
I just began to play around with HTML/CSS and I'm already stuck.
I tried to google my problem but I think I'm missing some keywords to find a solution. Why isn't the Link and Text inside <div id="NavContent>?
DEMO
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scrare</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>
<div id="NavContent">
<a id="Link" href="/">Link</a>
<div id="Text">Text</div>
</div>
</nav>
</body>
</html>
Once you set elements inside a div as float, they lost their influence on height attribute on parent element.
That said, you can:
Set a height for the div; or
Add a empty <div> after <div id="text"> but not inside, with style='clear: both;'
Easy fix is to add overflow: hidden; to #NavContent.
Or you can add the clearfix solution -
#NavContent:after {
content: "";
display: block;
clear: both;
}
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
#NavContent:after {
content: "";
display: block;
clear: both;
}
<nav>
<div id="NavContent">
<a id="Link" href="/">Link
</a>
<div id="Text">
Text
</div>
</div>
</nav>
<main>
</main>
<footer>
</footer>
There are few ways to solve your problem.
Add a suitable height to #NavContent element (like height:200px)
Or
set overflow property of #NavContent to auto
I am trying to make a rectangular scalable div that has a transitional hover state. My code seems to work great in Chrome and Firefox, but IE10 simply refuses to entertain me. Below is my code and CSS example. Any help would be great.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body>
<div class="quote">
Interesting Quote
<p class="name">Quote Author</p>
</div>
</body>
CSS:
.quote {
font-size: 2em;
position: relative;
width: 20%;
padding: 5%;
float: left;
height: auto;
margin: .5%;
background-color: #99F;
color: #fff;
text-align: center;
}
.name {
font-size: .5em;
color: #000;
}
.quote:hover {
transition: background-color 0.5s ease-out;
background-color: #000;
}
.quote:hover .name {
transition: color 0.5s;
color: #FFF;
}