This question already has answers here:
CSS, using display:table with before pseudo element
(2 answers)
Closed 5 years ago.
In this example, why does container need to have the pseudo-element after and before with content: '' and display: table to show the gray background? Shouldn't container automatically expand to fit both of its children and then fill out the negative space with the gray background without the pseudo-elements already?
This is called a 'clearfix', when a container has all of his the childs floating, you have to use a clearfix on it.
I put a black background in the container:
With clearfix: https://codepen.io/anon/pen/GvoEjx
Without clearfix: https://codepen.io/anon/pen/NvxgRe
https://css-tricks.com/snippets/css/clear-fix/
.container:before,
.container:after {
content: "";
display: table;
clear: both;
}
Related
This question already has answers here:
display:inline-block and overflow:hidden leading to different vertical alignment
(3 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 2 years ago.
If I set display: inline-block on a <span/>, there is no visible difference, which is good. But when I further set overflow: hidden, the following text goes a litter bit lower. Why is that?
I saw no margins/paddings at all.
PS. what I'm trying to accomplish is to make text-overflow: ellipsis happen, which requires max-width, which in turn requires inline-block.
.s1 {
display: inline-block;
overflow: hidden; /* this makes the following text a bit lower, why? */
}
<span class='s1'>Hello</span> world (why am I a litter lower than "Hello"?)
Specifying overflow other than visible creates a new block formatting context, which does not have a baseline anymore, so it can't be aligned with the surrounding baseline.
You can fix up the alignment with vertical-align: bottom:
.s1 {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
<span class='s1'>Hello</span> world (why am I a litter lower than "Hello"?)
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Example:
https://codepen.io/229075284/pen/aboQVXZ
.outer{
background-color: pink;
}
.outer::after{
content:'';
background-color: red;
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 0;
/* display: table; */
}
.inner{
background-color: blue;
height: 300px;
}
<div class="outer">
<div class="inner"></div>
</div>
When I set display of outer::after to inline-block,the outer will have some extra space marked as pink, even if set font-size and line-height to 0. However, when I set display to table,the extra space disappears.
So I am wondering why the extra space appears?
I checked your codepen. It is a combination of both display: inline-block and content: "" on the ::after pseudo element. You are basically telling the browser that right after the outer element you want to reserve an element's place in the DOM.
You could see that if you remove the content: "" although you are using inline-block the extra pseudo div after the .outer element would disappear. That is because although you stated a certain display mode you practically have no content in this element and the browser ignores your element because it has no fixed size in pixels and no actual content within it.
The reason .outer is growing is that its height is set to auto in default, if you would give it a fixed height in pixels it might not show the spare div.
Your question has nothing to do with line-height or `overflow'.
Me personally I prefer not to use pseudo-classes like ::after and ::before in production. I prefer using regular divs and have my code more readable and understandable by other developers, anyway I hope I helped out. Feel free to discuss further if you have more questions.
This question already has an answer here:
Removing spacing under the image
(1 answer)
Closed 6 years ago.
i have this code (https://jsfiddle.net/26gvaekf/1/) and want that A height was exactly at IMG boundaries. However, there is small space after IMG
can anybody explain, why this happens? and which css property i should use (only not float one).
DEMO
css
img {
vertical-align:top /* img are default bottom aligned make it to top */
}
/* for demonstration purpose */
a {
display: inline-block /* to cover your img completely */
}
This question already has answers here:
Floated element gets outside of its parent?
(5 answers)
Closed 6 years ago.
The li height is not defined and it automatically changes with the content. However, it only changes with the right hand side of its content rather than the left. Have changed the left side to block but it does not work. The link is as follows:
[http://ec2-52-32-145-125.us-west-2.compute.amazonaws.com/#/posts][1]
Add this to your CSS:
.posts li {
overflow: auto;
}
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I tried to set a img before my option field.
I tried
option::before
{
display: inline-block;
width: 16px;
height: 16px;
background-image: url();
}
But it doesn´t work. How to do it?
It is not displayed in Firefox inspector. Normally there should be displayed ::before
Pseudo selectors are like empty DOM elements. And any element to be styled needs to have some content.
Your ::before pseudo element needs some content, which you can simply fill in using 'content' property.
option::before {
content: '';
display: inline-block;
...
}
Also note, you can use 'content' property to any HTML DOM element.
And for pseudo selectors, they need to have a 'display' property along, unless positioned absolute or fixed.