This question already has answers here:
Display: Inline block - What is that space? [duplicate]
(5 answers)
Closed 8 years ago.
I got two divs
<div>abc</div>
<div>def</div>
with css as this
div{
display:inline-block;
padding:0px;
margin:0px;
}
body{
padding:0px;
margin:0px;
}
how can i remove the gap/space between first and second div
link for the same http://cssdeck.com/labs/i5oysgmt
Remove the spacing at the code level.
Write like this.
<div>abc</div><div>def</div>
div{
display:inline-block;
padding:0px;
margin-left:-4px;
}
Demo
That is because of the white space in inline-block elements
html
<div>abc</div><div>def</div>
You can read here more
Related
This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 5 years ago.
As you can see, that box has less height and I wanted the bottom one to stack with it, is it possible to do it? Any help will be appreciated.
This is the css I have:
<style>
div{
display: inline-block;
margin:0;
position:relative;
top:0;
border:1px solid black;
}
</style>
Just use flex's rule align-items: center.
See this article for more details.
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 6 years ago.
I have an h3 with a height of 100%. Therefore the height is unknown. How can I center the text within itself? For the sake of the example, I have given the parent fixed dimensions but this is not the case. I have tried using vertical align but that doesn't work, I believe I may need to change the display to do that?
I don't want to center the text within its parent, I know various methods to do this. I want to know if it is possible to vertically center it within itself. The text needs to be 100% in both dimensions so that the link fills the parent div.
.unknowndimensions{
height:300px;
width:300px;
}
.unknowndimensions h3{
height:100%;
width:100%;
background:#f7f700;
text-align:center;
}
<div class="unknowndimensions">
<h3>Title</h3>
</div>
Using table method,
.unknowndimensions{
height:300px;
width:300px;
}
.unknowndimensions a{
display:table;
width:100%;
height:100%;
}
.unknowndimensions h3{
display:table-cell;
vertical-align:middle;
background:#f7f700;
text-align:center;
}
<div class="unknowndimensions">
<h3>Title</h3>
</div>
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
Tried everything, with ul's... div's... but it doesn't appear how it should do.
The main div has margin 0 auto. The main div is 1030px width.
I bet it's a stupid thing...
Demo Fiddle
HTML
<div><span>Things to Know</span></div>
CSS:
div{
text-align:center;
}
div:after{
position:relative;
display:block;
border-top:1px solid grey;
top:-10px;
height:1px;
content:'';
}
div span{
background:white;
position:relative;
z-index:1;
}
This question already has answers here:
Center div in page
(2 answers)
Closed 9 years ago.
I've googled this many times, and I cant understand why my div wont center.
HTML:
<body><div id="mydiv"></div></body>
css
*{
margin:0;
padding:0;
}
html,body{height:100%; width:100%;}
#mydiv{
height:50%;
width:50%;
background:grey;
margin:auto;
}
It only centers horizontally and wont center vertically, whats the problem because im not seeing it.
Try something like:
#mydiv {
height:50%;
width:50%;
background:grey;
position:absolute;
top:25%;
left:25%;
}
If you need vertical centering too, refer to the Dead Centre approach, you will need a few extra <div>s but it should help!
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Hopely useful for you:
http://jsfiddle.net/Ug3RM/
#mydiv{
position:absolute;
top:50%;
left:50%;
height:50%;
width:50%;
margin-top:-25%;
margin-left:-25%;
background:grey;
}
To vertical align you can try setting your margin like so:
#myDiv{margin:50% auto;}
Of course this will depend on your containing elements. However if the markup is as you have provided, it should display vertically aligned in the center...
OP,
Check this Fiddle. Centers both vertically and horizontally.
Uses the display:table and display:table-cell approach, which conveniently allows for vertical-align: middle to be paired with margin: auto.
Hope it helps.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
The situation is:
The CSS:
<style>
#aux1{
position:relative;
background-color:#ccc;
width:100%;
height:200px;
}
#aux2{
display:block;
background-color:#F00;
width:100px;
height:100px;
margin:20px;
}
</style>
The HTML:
<html><head></head>
<body>
"...some content (div with height: auto)"
<div id="aux1">
<div id="aux2">
</div>
</div>
</body>
</html>
The problem is that the margin property from aux2 acts strange as in the following image:
If I put overflow:hidden in aux1 the result tends to normal:
Why do I even need to use overflow:hidden for the margin (especially margin-top) to act normally?
The answer is, margin collapsing as in this question: Why does this CSS margin-top style not work?
Another question reference: What is the point of CSS collapsing margins?