I'm creating a tile-based game and am using block rendering to update a large list of tiles. I'm attempting to do this in the most simple manner, so I've been trying to work with HTML's default layouts. Right now I'm creating 'inline-blocks', omitting whitespace between the elements to avoid horizontal spaces in between them but when the blocks overflow and create a new line there is some vertical margining in which I do not know how to remove.
Example to make this a bit clearer:
http://jsfiddle.net/mLa93/13/
(Pretty much I just need to remove the spacing between the block rows while retaining the simple markup.)
In the effort of keeping your code as close as possible to how it was:
http://jsfiddle.net/mLa93/20/
Add line-height: 0 to #container.
Add the hacks to make display: inline-block work in IE7.
Use display: block and set float: left. See this fork:
http://jsfiddle.net/q5eSG/
Instead of using display: inline-block, simply float the div elements.
Then, you just need to clear the floats on your #container element, which I do so using overflow: hidden;
Check out the working example: http://jsfiddle.net/Ymz3m/
Related
I have quite an interesting problem in front of me. I think it would be better to illustrate it in codepen:
https://codepen.io/BooleT/pen/bWdPWe/
In the class names ib means "inline-block" and iib means "inner inline block".
I have created figures to illustrate what I am trying to achieve. In the next 3 paragraphs I will reference the images in this album:
https://imgur.com/a/9CFAm
So there are three inline blocks, one of which is actually a container of three other inline-blocks:
The effect I want to achieve is to make the contents of the container to wrap into 2 lines when I resize the window:
But instead I only manage to wrap the whole container itself to the second line:
Is there actually the way to achieve what I want? I've tried to add nbsp between outer inline-blocks and to add white-space: nowrap to the body element (and overwrite it to white-space: normal for the container), but none of it worked.
I know that I can work around it by adding media-queries or js that simply reduces the width (or max-width) of the container when I reduce the screen width, but it doesn't seem like the solution. I don't even know the width of every block in my real layout.
I will try to keep an open mind, since the solution to this problem might require to change the entire layout of the page, but I do think there is one.
Being not a fan of flexboxes – the burden of old-browser compatibility still standing strong where I come from – here's what we do to make a container on the right occupy all the remaining horizontal space:
Codepen
The fixed-size divs on the left are told to be float: left.
The spanning div on the right is given display: block.
The smallest inner divs are display: inline-block.
If you can use flexbox then this pen: http://codepen.io/anon/pen/RVWwEP seems like it does what you want. Be aware of the compatibility caveats that go along with flexbox, though.
For convenience I've put display: flex; on the body to create top level row, although #10nikov's answer is definitely a better way to do that.
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
When you set a button element to display:block it dominates its vertical space like a block while still calculating its size based on its contents like an inline-block. This seems like a really useful behavior. Is it possible to make other elements behave this way?
Example
I can accomplish a similar method of display using floats and clears, but it causes havoc on nearby content that isn't tailored to it.
I can accomplish it more sanely by wrapping each element and making the outer element display:block while the inner element is display:inline-block. This requires extra markup though.
Sounds like you want display: table.
Such a “table” shrinks to just fit its content, and if the content is not a display: table-row or display: table-cell then it is just treated as if it were inside a single-cell table. You can also center it horizontally using auto margins.
I changed block to table in your example and it did exactly what I think you want.
(If you've thinking about the advice “don't use tables for layout” — that is referring to using tables written in HTML markup, not any CSS facilities.)
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
I am new to the world of coding as well as CSS and recently came across the property vertical-align. Having read a number of articles on what it is, I am still clueless on what it is for and when do you use it?
My understanding is that it is used for inline elements such as text, images, etc as well as text or other inline elements in a table. They cannot be used for block element such as div, h1, etc.
If my understanding is right, apart from aligning text vertically to say an image or using subscript or superscript, what other purpose does it serve?
It's used the vertical align inline elements indeed. Block level elements will ignore this property. So your understanding is right.
This blog gives some background information on vertical-align with some examples. It's mainly used to vertically position an image in a line of text. Or to replace the valign attribute on tablecells.
So it seems you are understanding it quite right. See w3schools for the details on the vertical-align property.
Just to be clear; do not try to use vertical-align to position a blocklevel element like a div. It will not work, as you already mentioned, it's for inline elements like images in a line of text. Using display: table-cell; and vertical-align on an element is a hack, please use other CSS techniques to vertically align stuff in an div whenever possible.
It's always worth reading the specs if you want to learn about a specific property:
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
A common use case is vertical centering (in combination with display: table-cell):
http://jsfiddle.net/7eTb2/
div {
background: #ccc;
width: 200px;
height: 300px;
padding: 5px;
display: table-cell;
vertical-align: middle
}
It's somewhat difficult to vertically center without using this technique.
Another common use case is when it comes to elements that are inline or inline-block.
See here for examples of what happens with different vertical-align values:
http://www.brunildo.org/test/inline-block.html
Another good link to read: http://css-tricks.com/what-is-vertical-align/
However, it's real use is getting me upvotes, see:
https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22
:)
Others have been mostly correct about vertical-align. The reality is that it works, just not how you think. It's for inline elements, not block elements.
In this case, a fiddle is worth a thousand words. :)
http://jsfiddle.net/JJfuj/
vertical align, by the W3C and by how most(tm) interpret it, is only used/takes affect in elements that are table-cells (<td>), and on some browsers, elements with the display: table-cell declaration.
The rest of the time, it is largely disregarded by browsers.
Vertical align is for just what it sounds like. It aligns the element vertically within the parent object; however, not all browsers interpret it the same.
Here's a little more in-depth information on the parameter values available.