Is there any point to using:
overflow: hidden;
If after you remove it there is no difference?
You made the code, that’s why I’m asking you.
Is there any point to using:
overflow: hidden;
If after you remove it there is no difference?
You made the code, that’s why I’m asking you.
Just a brief question, please. Why do you have 12px of margin below each row and only 4px between columns? I don’t know the purpose of the pattern so it just looks odd to me, thus the question. Are you just collecting code, or is this part of a larger picture?
width:266px;
height:174px;
I wanted to put links inside those parameters, that’s all.
And that’s what I came up with, nothing special.
OK, thank you.
Q. Why does the appearance change when .links {height:174px}
is deleted?
(Notice that I’m being grown-up and identifying the selector in which the property is assigned instead of making you hunt for it or guess.)
That is one way for a parent element to contain (encompass) it’s floated child elements.
In this case it could probably be eliminated since there is a fixed height on the parent .links
Paul probably put it in there as a safeguard so you couldn’t break the layout if the height was changed.
Fixed heights are generally not a good idea
If fixed height is removed it looks like this.
And that is actually Correct!
You set a 12px bottom margin on all the children , the .links a
So the code IS doing what you told it to do.
With the fixed height you were hacking off the bottom margin to get it to look the way you wanted it to look.
But that’s the way I wanted it to look???
how do I remove the bottom 12?
Say that again using different words, maybe. That what, look like what?
…
Think about it… how else do you think it could be done?
Something like this?
Same method.
.links a:nth-of-type(5n) {
margin-right: 0
}
set a new class on the last five anchors, then remove the bottom margin on that class.
<a href=“” target=“_blank” class=“bottom”>
.bottom {
margin:0 4px 0 0;
}
I wouldn’t do something like this?
.links a:nth-of-type(5n) {
margin-right: 0
}
The line contributed by @TechnoBear assigns {margin-right:0} to every 5th item.
.links a:nth-child(5n+5) {margin-right:0;}
The following line assigns {margin-bottom:0} to the 11 item and higher, every item in the last row.
.links a:nth-child(n+11) {margin-bottom:0;}
It takes some studying and practice to learn and remember how to these selectors count.
I don’t understand this:
https://css-tricks.com/examples/nth-child-tester/
Bottom last row would be what?
It’s not very informative. It is better to learn how these pseudo-selectors count.
Now overflow is doing its job.
Here is what I came up with so you don’t need to use a new class
.links a:nth-last-of-type(-n+5) {
margin:0 4px 0 0;
background:white; /*testing the targets*/
}
.links a:nth-of-type(5n){margin-right:0}
The new :nth-last-of-type() must proceed your :nth-of-type() in the cascade
Now you CAN remove the height from the parent and the code is doing what you want it to do.
Overflow:hidden is also doing it’s job.
Are you doing your job?
Your job is to actually read and learn all the links that people provide to you.
Did you read the float containment link I posted?