I'm starting a new project and i wanna use normalize.css but i'm facing one little problem with. In the top of the DOM you'll find a yellow gap, body background-color.
The main container is green colored and contains exactly the html from normalize.css demo.
You'll find a demo right here: http://goo.gl/hf8cv
What you see is margin collapsing.
When an element with a margin is inside an element without border or padding, the margin collapses with the margin of the parent element.
It's the margin of the h1 element that you see at the top. As none of the parents have border or padding, the margin collapses all the way out to the outermost container.
Related
I'm reading the documentation on Bootstrap spacing utilities and it is unclear to me how to apply spacing (either margin or padding) to only ONE side of an element.
I am using the class .ps-5 and I would expect that to add padding to either left or right depending on reading direction RTL or LTR, but it is applying the padding to BOTH sides of the element. Screenshot below shows how both padding-left and padding-right are being applied to the element.
What am I missing?
https://getbootstrap.com/docs/5.1/utilities/spacing/
I am trying to get a waved vertical borders with a box-shadow like this.
I am able to get the waved vertical borders but when adding box-shadow, it overlaps the waves as the waves are not statically positioned and don't directly belong to the container's vertical borders.
Use a different div for shadow with exact or slightly fewer dimensions than that of the wavy-border div. Use position: absolute; on both divs and give the wavy-border div a higher z-index to make it appear on the top of the shadow div. Set the yellow shadow but on the shadow div as you want. This way the shadow won't interfere with the wavy border.
You may want to put both divs in the same parent div and set the parent's display to relative. If you don't the absolute nature of wavy-border and shadow divs will be based on body and not the proper position in your HTML.
You can also use filter: drop-shadow(...); as Temani Afif mentioned in the comment. When doing this, you won't need to use two different divs. You just set the drop-shadow directly on the wavy-border div. drop-shadow makes it possible to shadow exactly based on the content, instead of based on a box.
Is it possible to set the z-index of the padding of a specific div?
I'm using particle.js as an interactive background that changes with mouse position. However, this only works when the canvas is at the top of the stack. I am using a div container for the main content with a padding of 10%.
I'd like this padding to be sent backwards on the stack so that the mouse can interact with the background.
So I managed to solve this by removing the padding and margins of the div and using relative position with the same spacings as the margin previously. I then set the canvas z-index to 1 with the container div z-index to 2.
So let's say I had several <div>s, each having a margin-top and a margin-bottom. I would expect these elements to be arranged one after the other: Top Margin -> Div -> Bottom Margin for each one. However, the top margin is "going over the bottom margin" (fiddle). So the distance between each element is just the margin-top.
I've found a way to fix this using float:left;, however I must not use this property, neither absolute positioning.
PS: If you can't see the problem in the fiddle, use something like Chrome's console.
What you are seeing is called margin collapse. It is the correct behaviour according to the standard.
Margin does not push down another margin
I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.