I have a div that contains a link:
<div id="like_bar"></div>
With some CSS:
#like_bar{
width:140px;
height:26px;
background:url('bar.jpg');
}
#like{
display:block;
width:20px;
height:20px;
margin:3px 36px;
background:url('mini_img.png');
}
The link is placed at the top of the bar and the margins on the link are applied to the bar. This is annoying. Could someone explain these collapsing margins, how to avoid them and what they're used for.
There are many ways to "fix this".
Perhaps the easiest for you would be this:
#like_bar {
overflow: hidden
}
Other ways include:
Add some padding
Add a border (even border: 1px solid transparent is enough)
float the element
position: absolute
And, like in the snippet above, set overflow to a value other than the default of visible.
You also asked:
what they're used for
A common use case is the <p> tag.
See: http://jsfiddle.net/thirtydot/tPaTY/
Without margin collapsing, certain things would become annoying.
Because I'm lazy I'm just going to link to a few resources:
My answer here explains why the box model is the way it is, which is related to margin-collapsing being included.
The w3c css spec defines the behavior of margin collapsing. It's an expected behavior for convenience given the box model. You don't need to worry about double margins between blocks of content with it. What it sounds like you actually want is some padding around #like, rather than margins.
Think of CSS as a content-centric inside→out approach to styling, rather than a programmed outside→in approach.
Related
What is the CSS best practice when you want to give space to an element placed just after a first element.
Asume this html
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
Should you use this css
.a-block { margin-bottom: 10px; }
or
.another-block { margin-top: 10px; }
?
i would use :nth-child width margin-top
div:not(:first-child) {
margin-top: 10px
}
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
<div class="another-block-1">ipsum</div>
<div class="another-block-2">ipsum</div>
In my opinion, margin-top in the second block is a better practice.
Indeed, the first div shouldn't take care about others divs since it was the first.
If the second is removed I shouldn't have to remember to remove margin-bottom from the first.
Using margin-top would eliminate the need of using a next sibling selector. It also removes the need of removing the bottom-margin from the last-child to avoid padding discrepancies when using text in panels or boxes.
Since nobody has mentioned it yet, I wanted to add that you could use both at once. This will cause them to meld together through a feature called margin collapsing. In certain situations this could as well be the best practice since you can use it to declare "this element need at least this much space below it". Note that margin collapsing may backfire on you if you accidentally use properties that disable it, such as floats, borders or flexbox.
.a-block {
margin-bottom: 10px;
}
.another-block {
margin-top: 10px;
}
div {
background-color: #e0e0e0;
}
.float {
float: left;
clear: both;
width: 100%;
}
<div class="a-block">Only 10px margin</div>
<div class="another-block">between these elements</div>
<hr />
<div class="a-block float">Double margin because</div>
<div class="another-block float">of the float</div>
It is completely up to the context in which the CSS is needed - is the short answer. It depends whether you need the first element pushed down as well as all the other elements. or you need the first element to be flush with the top of the parent but you need the bottom element to have a margin at the bottom.
The common sense thing to think is that the first element is already there so the second element will surely need to be "pushed" down, so the natural thing to do would be to add margin bottom to the previous element (at least that is the way that my brain works).
Current CSS browser support dictates that this is the preferred method. Due to the fact that, in CSS, there is a "next sibling" selector (~), an "adjacent element" selector (+) , and :first-child is more widely supported than :last-child is (purely because it is more difficult to implement in a browser than :first-child is). Namely this :last-child support issue is IE8 but this still affects us today when developing for certain clients.
There are no previous sibling selectors, so this makes me prefer the method of adding margins and paddings to the bottom of elements and not the top. Purely just to keep everything in my CSS to be using the same principal of "pushing things down from above or selecting the first element"
You should always be consistent on how you apply the styles.
For example, if you have a hero and think about the inside elements. For example, you have a title, optionally a button and optionally text below that. You can end up with having margins or padding that should not be there and were intended to have a button there.
Also, the point about collapsing margins is important when you have a design with different use cases. Padding doesn't collapse but if used improperly, can cause elements not to center 'properly'.
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
When creating HTML5 and CSS3 designs is it better to primarily use margin and padding for your designs over positioning or the other way around?
I've never really thought about it before and use both side by side to get the results where needed but it's possible to design in both ways as shown in the examples below:
HTML
<div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
</ul>
</div>
CSS Example 1 - Using margin, padding
div{
width:1000px;
margin:auto;
}
ul{
margin-left:10px;
width:100px;
}
li{
height:30px;
}
span{
margin-top:10px;
}
CSS Example 2 - Using just positioning
(Apart from the margin:auto ..)
div, ul, span{
position:absolute;
}
div{
width:1000px;
margin:auto;
}
ul{
left:10px;
width:100px;
}
li{
height:30px;
}
span{
top:10px;
}
For a typical page layout, Example 1 is much cleaner and you should choose that, given the choice.
Example 2 is bad because as soon as you start setting position: absolute on everything, any flexibility your design may have had goes out the window. You have to set explicit dimensions on everything.
In general (there are exceptions), avoid position: absolute for the main layout unless it's only way to do it.
Here's an example of the kind of problem I was talking about. It would appear that the user ended up using JavaScript to fix his problems. Not good.
All of the above. Positioning is good for things that pop out or can be dynamically created. Sometimes the positioning is actually a derived placement. The padding and margins generally are used for how those elements will be placed in relation to other elements. So an item can have padding, margins, and positioning and have all those attributes be relevant to the element.
A common theme is to get the client environment and then design based on relation to their viewable area.
See this link https://stackoverflow.com/a/8857735/1026459 for javascript to get client screen size (cross-browser compliant).
as rule of thumb, position rules are most suitable, as implied by their name.
margins are not very reliable due to their model inconsistency across browsers, thus less adapted for that purpose.
having said that, most layout techniques are a mash-up of both of these, and both are used in conjunction.
I have a <div> styled like a box:
.box {
border:2px solid #ccc;
background:#eee;
padding:1em;
margin:1em;
}
In this box, there could be any number of any type of child elements in any order:
<div class="box">
<h3>Howzit goin</h3>
<p>Here comes a list:</p>
<ul>
<li>I don't know what</li>
<li>this box will contain</li>
<li>but it could be anything</li>
</ul>
</div>
Most or all of the child elements inherit bottom margin of various lengths from the base typography stylesheet:
/* Example global typography */
p {margin:0 0 1.5em;}
ul {margin:0 0 2.5em;}
Which produces output like this:
...but we want to normalize the "padding" of the box so that it appears equal on all sides:
.box :last-child would be too easy, this has to work in at least IE8 as well as
modern browsers (but it could be used in conjunction with an IE-only method).
I don't want to use extra markup or javascript.
Is there any other CSS trick I can use to get the output I want?
Fiddle: http://jsfiddle.net/yuXcH/1/
As you can read in this question, even if it's about 2 years old, there's no "easy" way to do this in IE8 (the other thread is just about IE6/7, but things haven't changed - IE8 doesn't support :last-child either).
The best way, in my opinion, is to manually add a class last-child to your last child so you can do:
.box .last-child{ margin-bottom: 0; }
The alternative is using javascript, which is easier if you have a lot of boxes. With jQuery, it would just look like this:
$(function(){
$(".box :last-child").css("margin-bottom","0");
})
The only "pure CSS" solution I can think of is changing all of your padding/margins to always result in a box with same padding on all sides like Lollero suggested, but this will, compared to your previous solution, result in different margins between the elements inside of the box.
I would probably compensate the extra space by having padding or margin in both top and bottom.
http://jsfiddle.net/lollero/yuXcH/2/
Also some padding change in top and/or bottom of the parent element can be used.
http://jsfiddle.net/lollero/yuXcH/3/
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com