This question already has answers here:
Select all block level elements with css
(4 answers)
Closed 2 years ago.
By default, most browsers will add a top and bottom margin of 1em to many block elements, like ol, ul, blockquote, h1, h2, etc.
Is there any short and clever selector that can change theses vertical margins (let say to 1.45em) all at once, without having to list every element in the CSS file?
Note: This question have been marked as a [duplicate.] But I am not trying to select all block elements by their properties (which I know is imposible in CSS), nor do I want to select all block elements by listing them one by one. I am concern in creating an equal vertical (top and bottom) margin in all elements that by default create a new line, by using the simplest selector posible.
The best way I have found so far is to use the Universal Selector:
:root {
--custom-vertical-margin: 1.5rem;
}
* {
margin-top: var(--custom-vertical-margin);
margin-bottom: var(--custom-vertical-margin);
}
Even though the Universal Selector will also target inline elements, these are not and will not be affected by vertical margins.
This accomplishes what the question is about: to set equal vertical margins on any block element at once, without having to list every element [with display:block property] in the CSS file, nor by trying to target elements by their properties (which is imposible in CSS).
Related
I know the plus sign + selects the second of 2 elements that are next but not in one another. Is there a selector for the first element?
I have 2 headings right after one another. h3 then h4. I want to remove the bottom margin from the h3 if an h4 follows. Is something like that possible or do I need to just provide a negative top margin to the h4?
Quoting CSS tricks:
Let's be clear here, just in case someone is finding this from a
search engine: there are no parent selectors in CSS, not even in CSS3.
https://css-tricks.com/parent-selectors-in-css/
This article lays out a proposal for a possible parent selector, but due to various performance reasons, browsers would find it difficult to implement
So, the best you can do is negative margins. That's actually a fairly decent solution
h3 + h4 {
margin-top: -10px;
}
It is not possible to style on siblings to come.
You can use a negative margin on the h4 after an h3
This question already has answers here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
(6 answers)
Closed 9 years ago.
I want to put several divs into a container div, and line them up to make the container look like it has columns inside.
<div>
<div id="col_1"></div>
<div id="col_2"></div>
</div>
I can choose those divs to be inline-block or make them float:left with specific width and append a empty div to the last which the css style is clear:both.
Both seem fine, but which way should I do it?
In a word, if your page needs to run on old browser (less than IE8), consider the float method.
If you have no matter with this, then use display: inline-block (or any of the other new display properties). It's cleaner (as you don't need an HTML element to restore the float) and simpler.
It's a personal choice.
When using float you must clear them, so like you said you can add a clearing div or make the container with overflow: auto;.
When using inline-block you should have in mind you should add font-size: 0 to the parent div to remove the spacing between the divs and add the default font-size to the divs. (there is the negative margin fix, but I don't personally like it)
If you want the col1 to be in the left and col2 to be at right, better use floats (left/right).
If you want the cols to be verticaly aligned in the middle/bottom, better use inline-block.
But for most other cases is personal choice.
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:
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?
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 2 years ago.
What is the basic difference between the following CSS:
display:inline
and this:
display:block
Using these separately on an element, I get the same result.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
Read more about display options : http://www.quirksmode.org/css/display.html
Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
display: block - a line break before and after the element
display: inline - no line break before or after the element
Here is a comparison table:
You can view examples here.
display: block; creates a block-level element, whereas display: inline; creates an inline-level element. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flow of a document, whereas inline elements do not.
Some examples of block level elements include: div, h1, p, and hr HTML tags.
Some examples of inline level elements include: a, span, strong, em, b, and i HTML tags.
Personally, I like to think of inline elements as typographical elements. This isn't entirely or technically correct, but for the most part inline elements do behave a lot like text.
You can read a more through article on the topic here. Seeing as several other people in this thread have quoted it, it may be worth a read.
Display : block will take the whole line i.e without line break
Display :inline will take only exact space that it requires.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
You can refer example in this fiddle http://jsfiddle.net/RJXZM/1/.
block elements expand to fill their parent.
inline elements contract to be just big enough to hold their children.
display:block
takes the entire row(100%)of the screen ,it is always 100%of the screen size
display block example
display:inline-block takes up as much width as necessary ,it can be 1%-to 100% of the screen size
display inline-block example
that's why we have div and span
Div default styling is display block :it takes the entire width of the screen
span default styling is display:inline block :span does not start on a new line and only takes up as much width as necessary
Add a background-color to the element and you will nicely see the difference of inline vs. block, as explained by the other posters.
Display:block
It very much behaves the same way as 'p' tags and it takes up the entire row and there can't be any element next to it until it's floated.
Display:inline
It's just uses as much space as required and allows other elements to be aligned alongside itself.
Use these properties in case of forms and you will get a better understanding.
a block or inline-block can have a width (e.g. width: 400px) while inline element is not affected by width. inline element can span to the next line of text (example http://codepen.io/huijing/pen/PNMxXL resize your browser window to see that) while block element can't.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}
Block Elements: Elements liked div, p, headings are block level. They start from new line and occupy full width of parent element.
Inline Elements: Elements liked b, i, span, img are inline level. They never start from new line and occupy width of content.