This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I want to to display two divs inline, one div is 25% and the other 75%, when I use:
display: inline-block;
It seems to generate gaps in between the two divs, which obviously knocks the 75% div down.
How do I remove the gap? I used:
vertical-align: top;
This has removed the top gap... Now just the side gap needs to go.
See here jsfiddle.
The problem is that you have a white space between your two div elements, and because they are of inline-block display, it renders just like a space between two letters in a regular text.
The solution is using a negative word-spacing on the container:
word-spacing: -1em;
jsFiddle Demo
See more here: Fighting the Space Between Inline Block Elements
Also here display: inline-block extra margin
It's because of the whitespace between your divs in the HTML.. Make it like this:
<div class="grid_one">
</div><div class="grid_two">
</div>
http://jsfiddle.net/npP3p/1/
Or, use float:left;, but remember to clear the floating after that or give the container a height..
Just add float:left; to first class.
Fiddle
Tim is correct, its the whitespace that creates the margin.
Another solution to it is to add a margin-right: -4px to .grid_one, check the updated fiddle.
Float left was the precious gem you were missing
Float:left;
http://jsfiddle.net/npP3p/2/
Why not float: left; the divs?
Related
This question already has answers here:
What is the difference between block and inline-block with width: 100%?
(2 answers)
Closed 4 years ago.
I'm working on HTML.
I tried to center div in parent.
But there's always right margin extended out of the div.
So, now I changed to just a plain text, but it doesn't solve the problem.
How to fix this one?
That margin is because p is a block element.
Add following CSS.
p.myDiv {
display: inline-block;
}
Instead of margin: 0px;
Try margin:0 auto;
Try this one for your code.
<body>
<p class="mydiv">ok</p>
</body>
.mydiv {
width: 20%;
margin: 0 auto;
}
Paragraph is a block level element which takes the entire width by default. If you give width 20% remaining space will be filled with margin. If you don't want the remaining margin use inline block element. Check out w3scholl website for block and inline block elements.
Centering in CSS: A Complete Guide canu you read CSS TRICKS
Centering things in CSS is the poster child of CSS complaining. Why does it
have to be so hard? They jeer. I think the issue isn't that it's difficult to
do, but in that there so many different ways of doing it, depending on the
situation, it's hard to know which to reach for.
I've this fiddle:
http://codepen.io/FezVrasta/pen/rOvpqL
<div class="r1"></div>
<div class="r2"><button>toggle</button></div>
<div class="r1 target"></div>
Where I have 3 divs inside a flexbox, each div has a margin bottom.
One of these divs can toggle (hide/show).
The problem is that the first div should not change its size theoretically, but in practice it does.
I think the problem is flex not taking in account margins.
Is there a solution using flex?
In this case the flexbox-layout is missing 10px when you're removing the bottom element (corresponding to the element's margin-bottom) .
You can overcome this adding flex-basis: 10px to .r3. that will compensate the missing 10px.
pen
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
overflow:hidden + display:inline-block moves text upwards [duplicate]
(1 answer)
display:inline-block and overflow:hidden leading to different vertical alignment
(3 answers)
Closed 7 years ago.
So if I've got two sibling HTML elements like so:
<div>
<span id="child-one">ChildOne</span>
<span id="child-two">ChildTwo</span>
</div>
And one, but not both, of these two sibling elements have "display:inline-block" AND "overflow:hidden" in their styling:
#child-one {
display: inline-block;
}
#child-two {
display: inline-block;
overflow: hidden;
}
Then one sibling is shown offset a small distance below the other. (See it happening here: https://jsfiddle.net/reyan62/oqc71f25/) (P.S. I'm using Chrome)
Does anyone have an explanation for this? It seems very odd. I'm not super familiar with what "display:inline-block" does though.
Thanks!
I would suggest using overflow: hidden; on both elements. If it's not possible you can use vertical-align to address the issue. This question/answer explains the reason.
Add div > span { vertical-align: top; } to fix this.
Like so: https://jsfiddle.net/oqc71f25/2/
This is the best guide I used to understand how inline-block works, I hope it helps you,
http://learnlayout.com/inline-block.html
I would try to use overflow:hidden on the both of them or you can align them manually.
You could also position your elements into the div.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Best practice vertical-align center content on div
How can I vertical align center .content for the both squares using same CSS.
Example
Thanks
Here's the solution -> http://jsfiddle.net/Sha6m/12/.
You need to add display: table-cell; to the inner .content, set their vertical-align to middle (vertical-align: middle;) and give them the same height and width of their parent .area (100% width and height unfortunately don't work here, so when you alter the .area's height and width, you also have to do it for the .content div).
style='vertical-align:middle' ..
You're applying display table-cell to the wrong elements. You have to wrap them in a container, and apply display: table cell to that container. Check my example -> http://jsfiddle.net/Sha6m/10/
When u got a fixed height i would just add a line-height: 100px; and remove your vertical-align and display
jsfiddle modification
i have two divs, that float correctly in chrome, ff and safari but not iexplorer, the right div appears below the left div floated to the right- the two divs are wrapped by an outer div with a width of 800px;
<div class="b_left">
</div>
<div class="b_right">
</div>
.b_left{
width:350px;
margin-left:80px;
float:left;
display: block;
}
.b_right{
float:right;
width:350px;
height:280px;
background-color:#c8c8c8;
display: block;
}
when using divs for columns, which I assume is what you are intending for this, it is better to only float one of the divs.
Say i have a div called content which is 600px wide and inside it two 300px divs inside, leftblock and rightblock. Instead of floating leftblock left and rightblock right I instead float the leftblock left and put a 300px margin-left on the rightblock. This pushes the rightblock to the right and ensures room for the leftblock to fit in beside it while preventing IE from displaying weirdly.
Hope this helps
it is a bug of ie, it doubles the margins. you must add display inline to the .b_left.
display: inline
I created a quick jsFiddle here: http://jsfiddle.net/6JWq9/
And it shows up just fine. I suspect you have other code that adds padding or a margin.
Review my example, let me know what is different from yours and I can update my answer.
Just put margin: 0; padding: 0; on all three divs and go from there to check. Also reset styles are a MUST for IE, I use Eric Meyer's. (easy to Google).
Also, display: inline; on the one with margin will fix it for IE6 I suspect.