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/
Related
If the CSS text-indent will only do the first line, is there anything "wrong" with using the blockquote with the attribute of text-indent: xxx; that way everything within the blockquote attribute will be indented? Or, maybe that is the "right way" and I just don't know it (new/learning HTML and CSS)
The way to indent all lines of text in a block or, really, a block as a whole is to set margin-left or padding-left on it. The choice between these properties is relevant if the block has a left border (the border appears between margin and padding) or if it has a background color or background image (the background extends to the padding but not the margin).
Using the blockquote element means in practice setting a 40px margin on the left and on the right and a 1em margin above and blow. In the 1990s, and even later, blockquote was often used for indentation, because CSS was not available. It’s a blunt instrument, and using it is frowned upon as a matter of principle.
The text-indent property allows you to indent the first line of text within an element. The amount you want the line indented by can be specified in a number of ways but is usually given in pixels or ems.
It can take a negative value, which means it can be used to push text off the browser window. You can see this technique used in this example, where the element uses a background image to represent the heading. The text has been moved far to the left, off the screen. (Background images are covered on pages 413-418.)
I know this kind of question get asked everyday, but I don't seem to find a solution to this particular one...
So, the idea is pretty simple, I want to create a 3 column fixed width layout, with 100% width header and footer.
Everything seems to work aside from the footer.
Here is an example: http://jsfiddle.net/xMQLy/1/
So essentially the problem seems to be that, because the main body + lateral columns does not have a fixed height, the footer is not positioned at their bottom.
How would I go fixing that?
thanks
Using absolute or fixed for the position CSS property rips an element from the context of the parent. So, the parent width/height won't be affected by this child's size. The float properties also have this effect: It's not possible to effectively style using position:absolute/fixed or float.
I've thrown away these properties, and revised your code: #Fiddle: http://jsfiddle.net/xMQLy/5/
Some changes:
Thrown away useless CSS properties:
.wrapper{position:relative;top:0}
`.leftcol and .rightcol {floar:right/left}
Grouped together common styles (.leftcol, .main, .rightcol).
Updated HTML source, added a <div class="wrapper-align"> wrapper around each div in the source, and removed whitespace between these wrappers [1]
[1]The .leftcol, .main, .rightcol elements can be positioned next to each other applying display:inline-block on each div. However, the default alignment for these elements is the bottom. Because the columns have to be located at the top, vertical-align:top has to be used. This CSS property can only be used at inline elements. To achieve this layout without messing with float or display:absolute/fixed, an inline wrapper around a display-block element is necessary.
The whitespaces have to be removed, to prevent creating a gap between the elements. To illustrate, compare these pages: No whitespace vs White space.
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.
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.