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
Related
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
Let me explain my view of the difference between line-spacing (which I would like to emulate), and line-height, using this picture:
Here you can see text with line-height > 1 inside a container with padding. An extra visual whitespace is added to the top and bottom of the text, and I want whitespace to be added between the lines only.
Why I (and you) may need this feature, emulated line-spacing? Because if you have buttons or images inside this container alongside with text with line-height > 1, text and images will look misaligned. Text has extra whitespace added to the top and the bottom, which causes edge of the text look more far from the container border.
To avoid this, I manually add negative margins to the text:
h1 {
font-size: 30px;
line-height: 42px; /* or 1.4 */
margin: -6px 0 -6px 0;
}
So what's the problem?
I am very dependent on font-size in pixels. I need to recalculate margins after every change of font-size or line-height, and I have to calculate it for h3, p and so on.
I'm looking for some way to automate this (some magic I'm missing).
So I've read a couple of CSS guides and understood most properties, but I still can't position elements PROPERLY.
What I mean by properly: right now I position stuff using specific values ofmargin, margin-right, margin-left, padding, (margin-left:50px), etc... What this means is that my divs are all positioned properly when I view it in my own computer with a specific resolution.
So I hope this isn't too general, but how do I position stuff in a way that they will be in the same relative spot in the page, for every resolution/page size, no matter who and what views it (I guess if it's the same for 99% of cases it's also a good start).
A bit more specific: which properties can I use to position elements in the manner I described?
Here's a link of one of my little projects which are badly positioned (it's all good in my screen, but not so much on others:
http://kash.hostzi.com/utopia/minesweeper.html
check out #gameTable's css for example - I wanted to center that and did it in a horrible way.
In your linked example, it looks like you want the gameboard to be centered. If it's a block-level element, such as a div or table, and you want to center it, you can use this on the element itself:
margin-left: auto;
margin-right: auto;
If it's an inline element, and you want to center it, you can use this on the parent element:
text-align: center;
If you weren't trying to center it, but just want to have the position scale with the screen size, do something like this:
margin-left: 10%;
margin-right: 10%;
If you want the position to scale with the font size, do something like this:
margin-left: 10ex;
margin-right: 10ex;
You can start using percentages. Like:
margin-left: 20%;
margin-right: 20%;
and it will be margined depending on the window(the element in which it is) size.
I have a div classed content.
Inside the div, is a h1 tag.
Inside the h1 tag is a span tag, with its' class set to regTalker.
Here is the tag:
<h1><span class="regTalker">Not Listed? Register here</span>Browse Listings</h1>
The regTalker class looks like this:
.regTalker {
text-align: left !important;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
The container div has text-align value set to center.
The main string inside of the h1 tag displays centered.
The string inside of the span tag is also centered, not aligned to the left, as i would presume it to be...
What gives? Surely !important should override the content div text-align value?
There are two different css files in question, the main one, and the seconary one, which houses the regTalker class... These files are linked one after each other, so incase this comes up in an answer, it is not due to the instance of inclusion.
I have also cleared my cache and reloaded the css file directly. So its not that either.
I am using firefox 8.0.1, have not tried it on other browsers yet.
If anyone has any advice, or input regarding this issue, or how to solve the problem, it would be greatly appreciated, thank you!
The text-align applies to the content of the element it's applied to, not the element itself. The text inside the span is left-aligned, but the span itself is centre-aligned within its parent. As the span is an inline level element, it's only ever as wide as its content and as the span is centre aligned, its content will also appear to be centre-aligned...
If the span was as wide as its container, then the text in it would appear left-aligned, but you have to apply a display: block or display: inline-block to it before you can assign it a width.
Also, never use !important. It'll just lead to tears and gnashing of teeth in the long run.
You're slightly misunderstanding how text-align works. You can't use text-align to change the alignment of a span within its container; text-align affects the contents of the element it's applied to, and cannot affect its context. (If your span were a block element, your declaration would make its contents align left within it, but would still not make the span itself align left within its container.)
I have used this to answer the problem most described in comments for the answer from GordonM:
.regTalker {
position: relative;
top: -5px;
left: -20%;
margin-right: -10%;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
This was used to keep the main text within the h1 tag roughly centered, while applying positioning to the span element within it.
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.