This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to remove the space between inline-block elements?
If I have several child elements with display:inline-block, I can't have whitespace between the elements because that messes up the total width. I either have to put no whitespace in the source, or "cheat" by putting an empty <?php [whitespace] ?> between the elements, or use JavaScript to remove the empty text nodes.
Is there any way to make the whitespace not be rendered in CSS?
You can set the elements as block-level elements by using display: block; or float: left;. If you must use inline-block, then you'll have to adjust your HTML either by removing the spaces in the HTML itself or stripping it out with Javascript.
As #jValdron pointed out, setting font size to 0 for parent elements, and then re-setting the font size on the elements which need it, also works. There are potential issues with this, however (for instance, what if you have text in the parent element which isn't already wrapped in another element?). Regardless, the font-size solution does in fact work and it's one I've used myself, before.
CSS Tricks has a good article on dealing with the inline-block whitespace issue:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Apparently, setting the font-size to 0 on a parent element, and then restoring it on the elements themselves, should fix the problem.
Solution from here: How to remove the space between inline-block elements?
Related
This question already has answers here:
CSS selector for empty or whitespace
(3 answers)
Closed 3 years ago.
I'm trying to fix a layout quirk via CSS. I don't have direct control of the current markup being output.
The issue is that when we have a <fieldset> I need to add some margin to the bottom of it--except when the fieldset is empty--in which case I don't want an margin (as I don't want an empty fieldset taking up space).
Ideally, I could use the :empty pseudo class. Unfortunately, the way our markup is being generated, by "empty" fieldset ends up like this:
<fieldset> </fieldset>
Which is no longer empty, as there is a space in the markup between the opening and closing tag.
Is there any way, via CSS, to target a fieldset with only a space text element as the child node?
You should consider using :blank.
:empty - select elements that are empty.
:blank - powered-up form
of :empty, lets you select even white space.
I found an article that might help you understand more about the two.
Note: Though :blank is more powerful, it's not supported by all browsers.
I’m writing a template for marking on flex/box. And faced with the problem of emulation of some properties. At the moment, I decide them on JS. What complicates code.
So I decided to try to use the property of table-cell for child elements whose parent has the property display: block. Yes, it’s not right, but it works!
When I’m trying to break the table-cell elements to strings, I ran into a problem. And that’s how I tried to solve them:
If the child blocks table-cell overflow the parent horizontally, then
the following blocks are not transferred to the new line. And it is
logical. Example: Nowrap in link.
If I use the cancel flow, I lose equal to the width of columns for the element to be wrapped to the next line. So, this method only works for IE9+. I’m willing to drop IE7, but not ready to abandon IE8. Example: Wrap nth-of-type in link.
If I use the blocks which separate the table-cell on the line, everything becomes fine! But this complicates the CSS and JS code. Example: Wrap with break elements in link.
Example: http://codepen.io/anon/pen/GmgXmO
What ways to break table-cell can be applied, besides the above described options?
An example of a 12 column layout, fix the problem of calculation of the width percentage: http://codepen.io/anon/pen/PmwRvK
In order to make it clear why I do this.
I will be glad to hear your answers! And excuse me for my bad English.
P.S.: Ignore the strange size of the width in percent. It is calculated
according to the formula:
(100 * element.clientWidth / element.offsetWidth).
The smaller size, so it is more. Funny. This rule is applicable only to
the parent display: block containing the child elements display: table-cell
This question already has answers here:
Create leading dots in CSS
(17 answers)
Closed 9 years ago.
I'm interested in reproducing a table which uses dots to pad cell contents. Note that this is not text-overflow with an ellipses because the dots are not truncating content, they are just filling things up. And I understand :before with the "content" property is restricted to fixed content rather than a dynamic number of repeating characters, so I don't think that can be made to work.
Here's some HTML to produce effectively what the padding looks like:
<table>
<tr><td>ID</td><td>Col1</td><td>Col2</td></tr>
<tr><td>1...</td><td>cats............</td><td>rain</td></tr>
<tr><td>2...</td><td>dogs...........</td><td>snow</td></tr>
<tr><td>15..</td><td>elephants...</td><td>snow</td></tr>
</table>
How might I do this padding using CSS without needing to utilize "." everywhere?
You can use ::before or ::after pseudo-elements to display generated content with CSS.
In this case, I would change the elements in the top row to be table headers (<th>) and apply the rule to all tds that aren't the :last-child of their row:
td:not(:last-child):after {
content: '........................................................................................';
}
Here's a demo.
EDIT The above just stretched the table to fit however many characters were in the generated content, which (obviously) wasn't the desired effect. Using exactly the same HTML, you can still get this to work by setting overflow: hidden on the <td>s and position: absolute on the ::after elements:
td {
overflow: hidden;
}
td:not(:last-child):after {
content: '........................................................................................';
position: absolute;
}
Revised demo.
However, this still won't work in Firefox because it (alone) respects the fact that the overflow property shouldn't work on non-block elements. So if you want to target Firefox (and who doesn't?) you'll have to insert <div>s inside each cell, and apply the overflow: hidden and the ::after element rules to them.
None of the above will create infinite generated content though: you'll just need to use a very long string of dots in your CSS. For infinite dots you'd have to use a background-image as suggested in the response to the duplicate question.
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 8 years ago.
I was asked a question, whats the difference between the following and I did not really know the answer. So here it goes, what is the difference between,
display:inline-block
display:inline
display:block
thanks for your answers...
The main one you are struggling with is inline-block from your comment under your question.
inline-block is a way to get block elements to appear inline, so instead of floating a load of divs left, you could use inline-block on them, preserving their behaviour as divs but making them inline elements instead.
For example lets say you have
<div style="display:block" >Test</div>
<div style="display:block" >Home</div>
This will render as
Test
Home
Where as
<div style="display:inline-block" >Test</div>
<div style="display:inline-block" >Home</div>
will display as
TestHome
In addition, inline elements can't have width/height attributes. Block elements can. inline-block makes a block element look like an inline element but you can still apply styles that only block elements can have. See this demo.
Why is it like this?
What's the reason inside it?
When you float it, you implicitly make it a block element. And unlike inline elements (a included among these), block elements can be assigned a width and height. Here's a good explanation of block vs. inline differences.
Edit: removed "have layout" as part of description of block elements, this isn't quite true...
<a> is an inline element and flows amongst regular text. As Ben says, floating elements implicitly converts them to "block" elements.
One solution is to use the CSS style display: inline-block - the link will then work much like an image - flow inline with text, but also allow you to set a width/height.
The premise is incorrect.
use an inline-block
abc