This question already has answers here:
display:inline-block and whitespace
(3 answers)
Closed 7 years ago.
I'm using the float style to remove white spaces and I want to center it, but another white space appears after my div#bar
This is my html:
<div id="foo">
<div id="bar">
<div class="divo divo1">test1</div>
<div class="divo divo2">test2</div>
<div class="divo divo3">test3</div>
<div class="divo divo4">test4</div>
</div>
</div>
and css:
#foo {
width: 100%;
background: #999;
text-align: center;
}
#bar {
display: inline-block;
}
.divo {
display: block;
float: left;
}
http://jsfiddle.net/Kodam/ay3ywtqa/
Note: I don't want to use negative margin or font-size 0 styles.
Since #bar is an inline element, it has space reserved for descender text elements (e.g. j, y, g). You could float that left, but that would collapse it, so I'd recommend setting the vertical alignment to top:
#bar {
display: inline-block;
vertical-align:top;
}
jsFiddle example
try this :
#foo {
width: 100%;
background: #999;
font-size:0;
text-align: center;
}
#bar {
display: inline-block;
font-size:13px;
}
set parent font-size to 0, then set the needed font-size to the children.
jsFiddle : http://jsfiddle.net/ay3ywtqa/3/
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I have this code:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
The div elements with text in them keep going to the bottom of the parent div. What is the reason for this?
Because for inline elements the default vertical alignment is baseline. Set it to something like top or middle instead:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
vertical-align:top;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
While I can't fully explain why the div elements with text drop to the bottom, I found that you can solve this by adding the property:
vertical-align: top;
to the .sibling class.
In order to understand why the divs go below, let's talk about the display property you have mentioned for the sibling.
.sibling {
display: inline-block;
}
From the name, we can understand that display:inline-block declaration shows properties of both block and inline level elements. In order words its an inline element who's width and height can be set or it's a block element which doesn't start off from a new line.
In your code, you have mentioned inline-block so they don't occupy a single block rather all div's are displayed on the same line somewhat similar to what happens when you apply float. Here, the div won't occupy the whole line so when we resize the browser, it tries to fits in all the div's which could be fit into that single line.
Hope this makes sense to you.
This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 4 years ago.
I have a link that looks like a button and I would like to set the background colour to be different.
However, I don't understand why my holder div does not take the same height as it's child. I doesn't take into consideration padding.
Is there a clean way to fix this?
.link {
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
You need to add display: inline-block to your .link element:
.link {
background-color: green;
padding: .9rem 3rem;
display: inline-block;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
By default, <a> elements are display: inline, and do not have their layout impacted by the containing block. That is to say, they do not allow for a height or width to be set, and do not respect vertical padding and margins.
The <a> tag default display is inline, so its parent will display it vertically along its line box (based on the vertical-align property), you need to change it to display: block or inline-block, depending on what you’re looking for;
.link {
display: block;
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
Because by default a tag will have the property of display: inline; so make sure to change the anchor tag to display: inline-block; or display: block;
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 8 years ago.
How do I center a div at the middle of my page in html using CSS?
Something like www.google.com, when you go to the site, you will see the search bar and the logo are centered in the middle of the page.
Any way to go around this?
MARKUP
<div class="outer"><div class="inner">your content</div></div>
STYLE
.outer {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
text-align: left;
}
DEMO
<div class = "center_me">Some content</div>
corresponding CSS to center the div would be,
.center_me {
dislay: table;
margin: 0px auto;
}
or,
.center_me {
display: table;
width: 50%;
}
center the div using margin : auto.
Html:
<div id="center"></div>
And css:
#center {
margin : auto;
display : inline-block;
}
Try this;
Html:
<div id="element">your element</div>
css
#element {
width: 200px;
display: block;
margin: 0 auto;
}
I have a "container" div to which I gave margin:auto;.
It worked fine as long as I gave it a specific width, but now I changed it to inline-block and margin:auto; stopped working
Old code (works)
#container {
border: 1px solid black;
height: 200px;
width: 200px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="center MtopBig" id="container"></div>
New code (doesn't work)
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center MtopBig" id="container"></div>
DEMO fiddle.
It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div.
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center">
<div class="MtopBig" id="container"></div>
</div>
What 'auto' means:
Using auto for the horizontal margin will instruct the element to fill up the available space (source: http://www.hongkiat.com/blog/css-margin-auto/).
Why 'display: inline-block' does not center:
There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
Why 'display: block' centers:
When used as an element with display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: block is reserving this horizontal space (thus making it 'available'). Note that elements with display: block cannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal 'availability'.
Solution for 'inline-block' elements:
Elements with display: inline-block should be approached as characters. Centering characters/text can be done by adding text-align: center to their parent (but you probably knew that already...).
For elements with property display: inline-block;
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. [reference: CSS2§10.3.9]
margin-left:50%;
transform: translateX(-50%);
.container{
border:solid 1px red;
}
.container img{
display:inline-block;
margin-left:50%;
transform: translateX(-50%);
}
<div class="container">
<img src="https://placekitten.com/100/300" />
</div>
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/5EcPK/
The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.
I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.
Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.
But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?
Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.
When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).
So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
There is a few ways to fix that:
1. No space between those elements
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>
2. Using HTML comments
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>
3. Set the parents font-size to 0, and then adding some value to inline-block elements
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
4. Using a negative margin between them (not preferable)
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
5. Dropping closing angle
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>
6. Skipping certain HTML closing tags (thanks #thirtydot for the reference)
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<ul>
<li class="left">foo
<li class="right">bar
</ul>
References:
Fighting the Space Between Inline Block Elements on CSS Tricks
Remove Whitespace Between Inline-Block Elements by David Walsh
How to remove the space between inline-block elements?
As #MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
good answer in css3 is:
white-space: nowrap;
in parent node, and :
white-space: normal;
vertical-align: top;
in div (or other) at 50%
exemple : http://jsfiddle.net/YpTMh/19/
EDIT:
there is another way with :
font-size: 0;
for parent node and override it in child node
EDIT 2021 : personaly, I recommand use flexbox now : https://the-echoplex.net/flexyboxes/
It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:
<div id="left"></div><div id="right"></div>
Because there is a space between the elements. If you remove all whitespace, they will fit.
<div id="left">Left</div><div id="right">Right</div>
Either make them block instead of inline-block. This will render divs ignoring spaces between them.
display:block;
or remove space between tags
<div id='left'></div><div id='right'></div>
or add
margin: -1en;
to one of the divs in order to mitigate space taken by single space rendered.
Please check below code:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}
<div id="left">Left</div>
<div id="right">Right</div>
It can be done by adding the css display:inline to the div that holds the inline elements.
While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.
So it would be safer to use display:inline;
Flexbox example - this would be used for the parent class holding the two side by side elements.
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
Taken from Vertically centering a div inside another div
add float: left; to both div tags.
div {
float: left;
}