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 */
}
Related
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 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;
}
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:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 7 years ago.
I have a DIV with a default fixed height and an overflow:hidden property to hide content that is to broad to be contained inside it.
div
{
height:50px;
overflow:hidden;
}
I would like to autoexpand this DIV hovering it with mouse but I have the problem that CSS transition works only with a fixed height and not with an auto height.
Here a JsFiddle that illustrate two cases.
I know that reason is that for some reason browrse does not know "how many px are auto height" but is there exist a workaround (maybe using max-height property...) to avoid need of jQuery?
When you give height: auto in the animation, it doesn't know what to do. As it cannot calculate the height on the fly. So, initialize the height using jQuery this way:
$(function () {
$(".auto_height").each(function () {
$(this).data("height", $(this).height());
});
});
And in CSS, give:
height: attr(data-height);
This question already has answers here:
How would I remove the gap between the image and the Bootstrap Nav bar?
(3 answers)
Closed 8 years ago.
Using Bootstrap 3, I've followed their examples to put a navbar at the top and then immediately followed it by a carousel. I've removed the margin-bottom:20px from the navbar but there is still a space of exactly 20px between the bottom of the nav and the start of the carousel.
If I put a margin-top:-20px on the carousel container then the space is gone.
Chrome inspector doesn't show any element accounting for the gap.
Why is the space there and what is the right way to remove it please?
Example is shown here: http://temp.hak.webfactional.com/
Thanks
This is caused by this rule :
body {
padding-top: 70px;
}
As your navbar as a 50px height (and what have we got here ? 70 - 20 = 50 !), change this padding accordingly and it'll be fine.
Add this css in your code
body {
padding-top: 50px;
}
Edit your css name- suntrek.css, line no 1
body {
min-height: 1024px;
padding-top: 51px;
}