I used text-align: center to to position three divs. But there is a small gap between each and every div. Why is it so? the picture is giving below? The divs are displayed as inline-block.
Inline-block elements often have spaces in between them because HTML displays newlines in the code as a space character.
For example, this will have a space between each div:
<div>blah</div>
<div>blah...</div>
<div>blahblah...</div>
There are various workarounds for this such as getting rid of the space in your code:
<div>blah</div><div>blah...</div><div>blahblah...</div>
Or setting the parent element to font-size: 0 and then setting the child divs to whatever font size you want.
I personally thought this was an interesting post on the subject: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
If the div elements are inline-block display, then the reason there are spaces in-between them is because it is recognizing all the new lines and spaces between the div elements and trimming them down to one space character. That is the space you are seeing.
You can solve this by using float: left; if that is applicable to your situation. Of course, you may have to confine them to their own block formatting context due to the floats.
Another solution would be to get rid of the new lines and spaces in-between the div elements. You can do that like so:
HTML:
<div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div>
Unless you absolutely have to use display: inline-block; then refer to the link at the bottom of my answer for a wide range of solutions.
The best solution would be to change display: inline-block; to float: left; since they will float right next to each other by default.
If they are inline-block you will need to add margin-right: -4px to offset the default margin-right.
This is based from the lack of HTML/CSS from your question.
Here are a few options of dealing with inline-blocks default margin, CSS-Tricks Inline-block
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
I just changed the header image on my site from
<div style="background-image... width=1980 height=350>
to using
<img src="... style="width:100%;">
so the image would scale down which it now does...
But now I have this mysterious 10px gap or so.
I've checked the inspector in Chrome, and I just can't see what's causing the space. I've searched other posts but can't find anything that applies.
Anyone out there have any idea? Appreciate any help, Bob :)
Look at this line of text. Notice there are no letters that breach the baseline.
Now look at the following sentence:
By just crossing the bridge he probably got away.
Note the letters j, g, p and y. These letters, known in typography as descenders, breach the baseline.
Source: Wikipedia.org
The default value of the vertical-align property is baseline. This applies to inline-level elements.
Your img is inline-level by default and, like text, span, input, textarea and other inline boxes, is aligned to the baseline. This allows browsers to provide the space necessary to accommodate descenders.
Note that the gap is not created by margin or padding, so it's not easy to detect in developer tools. It's a slight elevation of content from the container's bottom edge resulting from baseline alignment.
Here are several ways to handle this:
Apply vertical-align: bottom to the img tag. In some cases bottom won't work, so try middle, top or text-bottom.
Switch from display: inline to display: block.
Adjust the line-height property on the container. In your code reference (since removed due to linkrot), line-height: 0 did the trick.
Set a font-size: 0 on the container. You can restore the font-size on the child element directly, if necessary.
Related:
Why is my textarea higher up than its neighbor?
By default, IMG is an inline element. You need to set your IMG tag to be a block element, which can be accomplished with this style:
display: block;
Add
display: block;
to the <img>.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
I just changed the header image on my site from
<div style="background-image... width=1980 height=350>
to using
<img src="... style="width:100%;">
so the image would scale down which it now does...
But now I have this mysterious 10px gap or so.
I've checked the inspector in Chrome, and I just can't see what's causing the space. I've searched other posts but can't find anything that applies.
Anyone out there have any idea? Appreciate any help, Bob :)
Look at this line of text. Notice there are no letters that breach the baseline.
Now look at the following sentence:
By just crossing the bridge he probably got away.
Note the letters j, g, p and y. These letters, known in typography as descenders, breach the baseline.
Source: Wikipedia.org
The default value of the vertical-align property is baseline. This applies to inline-level elements.
Your img is inline-level by default and, like text, span, input, textarea and other inline boxes, is aligned to the baseline. This allows browsers to provide the space necessary to accommodate descenders.
Note that the gap is not created by margin or padding, so it's not easy to detect in developer tools. It's a slight elevation of content from the container's bottom edge resulting from baseline alignment.
Here are several ways to handle this:
Apply vertical-align: bottom to the img tag. In some cases bottom won't work, so try middle, top or text-bottom.
Switch from display: inline to display: block.
Adjust the line-height property on the container. In your code reference (since removed due to linkrot), line-height: 0 did the trick.
Set a font-size: 0 on the container. You can restore the font-size on the child element directly, if necessary.
Related:
Why is my textarea higher up than its neighbor?
By default, IMG is an inline element. You need to set your IMG tag to be a block element, which can be accomplished with this style:
display: block;
Add
display: block;
to the <img>.
I'm trying to fiddle my problem on http://jsfiddle.net and have got strangest behaviour there. Can you please explain where these (http://jsfiddle.net/C6V3S/) vertical margins come from? Does appear on jsfiddle.net (at least in Chrome and FF), do not appear when copy/pasting to local standalone file ...
works OK afer changing to simple block
Sample for standalone test file:
.btn {
padding: 0px;
border: 1px solid red;
display: inline-block;
}
.txt {
display: inline-block;
width: 12px;
height: 12px;
border: none;
padding: 0;
margin: 0;
background: #77FF77;
}
</style>
<div class="btn"><div class="txt"></div></div>
When you make the .txt element inline-block, it is taken into the text flow of the parent .btn element. At that point, the line-height of .btn kicks in, which is larger than the height of the .txt element.
So, add .btn {line-height: 10px;} (for example) and your problem is fixed. I saw you already tried to influence the line-height of the inner .txt element, so you were pretty close with your attempts. Adjusting the font-size would work as well, since the default line-height is formula-based on the font-size. Anyway, the key is to do that on the parent element, not the child element.
You don't have this problem when you make the inner element a block, because then there's no text-like content, so there's no line-height applied at all.
inline-block is brilliant and convenient for so many cases. But they come with one annoying pitfall: unnecessary whitespace. As you're nesting an inline-block within an inline-block, that results in a white-space disaster. You can read all about whitespace and inline-blocks on David Walsh's blog.
There are many ways to handle this, but my favorite (and most widely supported) solution is setting this to the parent inline-block element:
.btn {
font-size: 0;
}
Here is an example of before/after:
http://jsfiddle.net/C6V3S/1/
This is not caused by whitespace (you don't have any inside the divs in your HTML), nor by putting inline-block inside of another inline-block. This is caused because of the line-height of the outer div. As you can see from the below fiddle, the current line-height of the red-border div has a line-height that is being set by the browser (and it varies from browser to browser), and as long as there is something inside of the div that takes up space as an inline or inline-block item, the height will be affected by the line-height.
There are many ways around this, and they all pretty much do the same thing:
1) Take the inside element out of flow, and then reinsert it back in. This will make the outer div think that there is nothing inside of it, and try to become as small as possible, and then fill up space exactly around the element when it inserted back in. The easiest way to do this is by floating it.
2) Make the outer element take up no space. This will make the inside element define the height and width of its parent. If you do font-size: 0, as mentioned before, this will make the outer element think that the inline inside element takes up no space, and therefore not take up any space itself, and wrap itself tightly around the inner element. This can be done by setting line-height: 0 as well (which is a perfect fix for the problem, as the problem is line-height).
There are other ways to make the parent element not have its line-height, but that should get you started.
http://jsfiddle.net/C6V3S/4/
It's "just how it works," but it can be worked around. The easiest way to fix it would be to set negative margins on .btn. It should work for any modern browser (IE8 and above, if I recall). Floating the elements should achieve what you want, too. As a wholly different solution if your problem with it is merely aesthetic, you can just wrap the elements in a parent, set that parent's background-color to what you want, and not worry about its child elements' backgrounds. They'll be transparent to whatever is beneath them, and you'll get rid of those visual breaks.
If you want to stick with negative margins on with display: inline-block, but need that pesky first element not to jump leftward out of its parent, you could target it explicitly:
.btn {
margin-left: -4px;
}
.btn:first-of-type {
margin-left: 0px;
}
Edit: After reading another answer, I'm not sure if I understood the question -- do you mean the margin atop the elements (which would be horizontal) or the margin to the sides (vertical)?
i want content NOT to wrap around it's floating sibling (may it be floating on content's left or right).
there will be no content following the content so containing floats/realigning baselines is out of the question. i just want content to "stand up and not curl around"
i know this is easily done by putting overflow:auto/hidden on the content - done it many times. however, this time, i cannot because.
the content will contain an <ul> of inherited width and has box-shadow - content will clip shadows if it has overflow:auto/hidden
i cannot set padding to the sides of <ul> because it has to be the same width as content.
i must NOT explicitly set dimensions, paddings and margins in any unit of measure, the same way when i do it when putting overflow:auto/hidden. this includes (but not limited to) adding a margin to move the wrap away from the floating element - the floating element's content may be dynamic in width.
my html and css is here: http://jsfiddle.net/QQQB5/2/ - but this one uses overflow to prevent wrapping but clips the shadows.
is there any other way to prevent content from wrapping aside from using overflow? as much as possible, no hacks, no "tricks/cheats". additional mark-up accepted if it can't be avoided.
Just use float:left on the content container as well and it will be fine :)
.content {zoom:1; float:left;}
Update:
Just because the link you provided which is from 2004 used FNE this isn't the case nowadays.
With CSS3 you just add:
.container:after {
content: "";
display: block;
clear: both;
}
and you don't float everything.
You could do it without floats:
.floater, .content {display: inline-block;}
.floater {vertical-align: top;}
See fiddle
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I've been trying everything i know for the past 1.5 hours and cannot figure this one out.
Actually far as i can tell, margin and padding are at 0, however, the containing divs are so far, inexplicably 4px wider and 1px taller then the containing image. I don't know where that comes from.
Few things which may be causing this:
I'm setting the max-width and max-height of the images via javascript to the size of the window.
I'm working with a combination of table, table-cell and inline-blocks to set typography in the way i need it.
Also working with body and html at 100% width and height
This is a Tumblr theme customisation (started from scratch though)
Code wise, it's hard to put the entire lot in here, so for now, I'll just give the link.
Hopefully if this can be figured out I'll be able to post the problem code in this question so it's good for reference in the future.
The link: http://syndex.me
Thanks
You mean on this guy?
.post.photo {
display: inline-block;
position: relative;
height: 100%;
}
You're likely not looking at margin, you're looking at textual whitespace. Since that div is being positioned as inline-block it's acting like an inline element, say, a word or a <strong> tag. If you remove the space between your starting/closing <div> tags, your "margin" will magically disappear.
If you're using inline-block for positioning, line-height: 0 and font-size: 0 are your best friends; they close up any effective whitespace, though they're very ugly hack. Floats are a better solution in most cases.
See #column_content and #column right on The Fashion Spot to see inline-block columns in use.
You have spaces between the divs because you use display: inline-block and the divs are separated by white space. It's just like you'd be writing letters on different lines: they'll appear with one white space between them. The vertical white-space happens because of the same reason - images are displayed as inline and the browser reserves some space for the line-height. The solution is to use display: block and float: left for the divs and display: block for the images.
In this case, i could not use float:left as there seems to be no reliable way to achieve center aligned series of divs using it. The answer is pretty simple, any mark-up within the inline-blocked, center aligned wrapper/child sequence needs to have no white space in between them, and should be wrapped in one continuous line of code. Pretty stupid, but it works 100% for this scenario.