Why does container div insist on being slightly larger than IMG or SVG content?
Trying adding:
img { display: block; }
to your CSS. Since an <img>
is an inline element by default, its height is calculated differently as related to the default line-height value.
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.
Source: https://developer.mozilla.org/en/CSS/line-height
div container larger than image inside
now used to this
img, #banner-img{
vertical-align: top;
}
Why does my Gatsby/Material-UI site render slightly larger than the viewport?
Solved. Adding a root div
element with padding
at least half of spacing pixels, so for spacing={8}
, the root div should have padding={32}
.
This is well-known functionality of Material-UI Grid.
Related to this issue.
Element aligned below bottom = 0px
As you can see by this example, the div.card
is a little taller than 150px (the height of the image).
If you explicitly set the height of the <div>
to the height of the image like in this example, this will be solved.
Actually, an easier way (as suggested by this SO answer), says that this is because the <img>
is, by default, an inline-block
element and this causes the height of the container <div>
to be calculated a little differently.
Adding a simple img { display: block; }
will be an easier way to solve this, as shown in this example.
Series of divs, where on each one is stacked a black div with transparency, with a centered text
When one mix elements (siblings) where some have a position other than static
, they end up in a higher layer, hence, in your case, the h1
sits behind.
As mentioned, for z-index
to work it need a position (other than static
), though one rarely need to use z-index
, instead make sure all, or none, has a position, so in your case, simply drop z-index
and add position: relative
.square-container { min-height: auto; background-color: white;}
.square { width: 100vmin; height: 100vmin; color: white;}
.hover-square { background: black; width: 100vmin; height: 100vmin; margin-top: 0; margin-bottom: 4px; position: absolute; opacity: 0.5;}
.square-logo { width: 12.5%; height: auto; margin-left: 50%; transform: translateX(-50%);}
h1 { position: relative; height: 87.5vmin; width: 100%; font-size: 36px; text-align: center; vertical-align: middle; line-height: 100vmin; margin: 4px auto;}
.square h1.first { margin-top: 50px; margin-bottom: 4px;}
<div class="square-container"> <div class="square" style="background-color: #e74c3c"> <div class="hover-square"></div> <h1 class="first">Case 1</h1> <img class="square-logo" src="//pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png"> </div></div>
Transitioning anchor side
So it's definitely possible, but instead of trying to achieve it with a combination of top
and bottom
, you can achieve it with using top
and translate
. This will allow you to have a clear point for your stop and start whilst still giving you the freedom of a responsive container.
It would look something like this:
from {
top: 4px;
transform: translateY(0);
}
to {
top: calc(100% - 4px);
transform: translateY(-100%);
}
Here's an example in action, (I've used a textarea
so that you can resize and keep testing, the button(+js) is just there to help facilitate the class change)
$('.go').click(function(){ $('textarea').toggleClass('up');});
textarea { position: fixed; top: 0; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; left: 150px;}
textarea.up { top: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button class="go">TRANSITION</button><textarea></textarea>
Lightbox position
You can't center it with the width and height being percentages (at least not without using JS).
You can however set a static height and width and center it like this:
Use top: 50%; left: 50%;
and static, negative top and left margins, which should be half of the width/height of your element.
.white_content {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin: -182px 0 0 -182px;
width: 300px;
height: 300px;
padding: 16px;
border: 16px solid green;
background-color: white;
z-index: 1002;
overflow: auto;
}
JSFiddle
Related Topics
How to Set Animation on First Element on Loading
CSS Mystery: Width Being Set to 0Px Without Any CSS Rules
Custom Tags Not Working in IE8
Change the Number of Columns and Rows in a Grid as the Number of Items Increase
Preventing Horizontal Scrolling in Mobile Devices
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders
Right Aligned Bootstrap Container Which Also Aligns with Default Container
How to Remove the Underline of a Link in Chrome Using CSS
Position Element at Bottom Right Corner of Current Window
Reset Angle of Text in Skewed Div Using CSS
How to Add Zig Zag Border to a Box Contains Background Image
How to Add Additional Information to an Attribute Selector via Nesting in SASS
Weird Behavior When Rotating an Element on Hover
How to Convert Rgba to a Transparency-Adjusted-Hex