I currently have two elements:
.item-one {
margin-bottom: 24px;
}
..other-elements..
.item-two {
margin-top: 48px;
}
These items are fine on their own, but say, if I removed the ..other elements.. between them, so they'd be one after another, I would be left with a total margin (visually) of 72px.
The ..other elements.. have a consistent 24px, because of the flow, but my app is dynamic and users can switch places of elements.
Unfortunately, this is highly undesirable as it'd result in bad looking spaces.
I'd like to write something like
.item-two [if-div-is-previous -> .item-one] {
//this will set the margin to 0 only if preceded by .item-one
margin-top: 0px;
}
In short, I'm trying to keep a consistent distance between all the elements on the page of 24 px, even when items that have different margins than 24px are one after another.
.item-one + .item-two { } //if .item-two is next to .item-one
That's not how margins work. CSS have vertical collapsing margins.
You're margins will always be 24px, not 48. As long as the two are adjacents and in the same formating context.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
EDIT: with the information you added I understand that your problem is that the following adjacent elements may have bigger margin. You can reset them with the ~ following selector
#one~*{
margin-top: 24px !important;
margin-bottom: 24px !important;
}
https://codepen.io/anon/pen/VMzwvq
Related
I'm having rows like these items as h2
height: auto;
min-height: 50px;
line-height: 50px;
But if I have a multi-line h2 it looks so bad. How can I decrease the line-height of h2 if it has multi-lines to be 30px instead of 50?
If you know the H2 that will have 2 lines, you can give them class or ID and target them specifically with line-height of 30px,.. if the H2 becomes two lines when the screen changes(of view), you can change line-height in media query css file for big, small or medium screens!!
Okay so. If you want to increase space between lines you can use line-height.
It is used to define the minimal height of line boxes within the element, but here is the thing. If you put it on h2 element it will be applied to every h2 element on your webpage or website.
Here are a few solutions to consider.
If you want bigger line-height for the element you can give that element a specific class and define line-height for that class, and whenever you need that line-height just add class to the element. This way you will reuse classes and write less CSS.
If you want to increase space between elements you can do this in two ways. Margins and paddings. These are really simple.
If you want to push element down you can give margin-top: 10px to it or margin-bottom: 10px to element above it, or if you have 3 elements (like in your case) you can give
margin-top: 10px;
margin-bottom: 10px;
to middle element and it will push away top and bottom elements for 10px. Same is with padding.
There are lots of ways to achieve the same thing in programming. First, sit down and think about what is easiest to write but is readable and scalable.
Happy coding :)
Changed min-height to 30 and line-height to 30 with Padding top and bottom
What's the simplest solution to make four equally sized boxes that is displayed inline (horizontally) and is centered in the screen all through out responsively?
I have four divs with same sizes, displayed inline and is always placed in center, meaning they always have an equal margins on left and write of the screen. And i want it to be responsive. I already tried flex-box but i'm having trouble with browser compatibility with css3.
I don't know if this is the absolute "best" way. But something like this would definitely work.
div {
width: 22%; //adjust as necessary
margin-right: 4%; //adjust as necessary
float: left;
height: 5em; //adjust or remove as necessary
}
div.last { //alternatively you could consider using the :last-child selector
margin-right: 0;
float: right;
}
You will have to apply a class of "last" to the last div. Alternatively you could use div:last-child if they were all contained in a parent element.
Also, when adjusting the margin/width make sure they stay relative. widthx4 + margin-rightx3 should always = 100 (assuming no padding or borders).
I have a paragraph on a web page with 20 pixel margins on all 4 sides. I want to alter just the top and bottom paddings with a single property (so padding-top:0;padding-bottom:0; will not do).
What I have tried is demonstrated here.
http://jsfiddle.net/nFCru/1/
In this Fiddle, I tried to use padding: 30px inherit; to alter just the top and bottom paddings of a paragraph. However, this property-value pair sets the left and right paddings to 0 in addition to altering the top and bottom paddings.
p {
border: 1px solid #000;
padding: 20px;
}
/*
* Here's my failed attempt at only altering the top
* and bottom padding values. The left and right padding
* values are changing even if I use inherit.
*/
p {
padding: 30px inherit;
}
Can I alter only the top and bottom paddings with one property?
No, you can't. inherit means the element inherits the padding from its parent. That is, the body (or whatever element the p sits in), not the "original" p in the stylesheet. To leave the left and right padding intact, all you can do is use the two properties as you described.
In short, no.
The only allowable attributes for padding are width (fixed) or percentage, or inherit (from the parent element). There is no way to inherit values already set.
To set the individual padding values you must use the individual properties.
See http://www.w3.org/TR/CSS2/box.html#padding-properties
Until now you couldn't. But even though this is a very old question I thought I'd update it with a new answer.
With the CSS Logical Properties and Values draft you will be able to do this in the future.
It allows you to specify the start and end of a block or inline padding which is dependent on writing mode and direction instead of simple left-to-right based on the screen in front of you.
If you wanted to specify a 10px padding on the top and bottom of an element you could achieve this with the following for example:
.element {
padding-block: 10px;
}
Although not yet supported by any browsers you could already use this in your projects by using PostCSS with the PostCss Preset-Env plugin.
If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.
Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.
p{
border: 1px solid #000;
padding: 20px;
}
p.another{
padding: 30px 20px;
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
Is there a way to do this with CSS?
Thank you
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
I give all my green child divs a complete margin:
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
You can do the following:
Assuming your container div has a class "yellow".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Note2: The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
Add margin to your div style
margin:0 10px 10px 0;
http://www.w3schools.com/css/css_margin.asp
I'm late to the party but... I've had a similar situation come up and I discovered padding-right (and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area inside the inner div so there's no need to add a negative margin on the parent as you did with a margin.
padding-right: 10px;
This did the trick for me!
Is it not just a case of applying an appropriate class to each div?
For example:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
A litte late answer.
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.