Does margin:5px 0; mean margin:5px 0 0 0; or margin:5px 0 5px 0;?
Does margin:5px 0 0; mean margin:5px 0 0 0;?
Same for padding of course.
Also, is it consistent across all browsers (including IE6)?
According to Box Model:
If there is only one value, it applies
to all sides.
If there are two values,
the top and bottom margins are set to
the first value and the right and left
margins are set to the second.
If
there are three values, the top is set
to the first value, the left and right
are set to the second, and the bottom
is set to the third.
If there are four
values, they apply to the top, right,
bottom, and left, respectively.
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
This is defined by the CSS standard, so it should be consistent across all browsers that implements CSS correctly. For browser compatibilities, check out blooberry's CSS Support History and quirksmode. According to blooberry, margin was first implemented in IE3, so IE6 should be fine.
For margin and padding, you can specify one, two, three, or four whitespace-separated values:
One value: All four sides use that value.
Two values: top/bottom get the first value; left/right get the second
Three values: top gets the first, left/right get the second, bottom gets the third
Four values: Top, right, bottom, left (i.e. clockwise from noon) get each value
margin: 5px 0; means margin: 5px 0 5px 0;
margin: 5px 0 0; means margin: 5px 0 0 0;
All browsers follow this, including IE 6.
Related
I often encounter situations where I want to change the padding-left and padding-right (or border-left and border-top, etc.) of an element, but leave the padding-top and padding-bottom as it otherwise would have been.
2 options:
{padding-left: D; padding-right: C;}
{padding: A B C D;}
where in option 2 I have to use Inspect Element to get the present values of A and C. Option 1 has the disadvantage of being wordy.
So, is there a third option where I can write {padding: A B C D;} except use some CSS word that means "what it would have been if I didn't specify it" for A and C?
Padding is a special property in CSS, because it has different 'signatures'. As far as I am aware, you can't do something like padding: initial initial 1em 1em, but you can use these shorthand properties:
From developer.mozilla.com
/* Apply to all four sides */
padding: 1em;
/* vertical | horizontal */
padding: 5% 10%;
/* top | horizontal | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 2px 1em 0 1em;
Unfortunately, it looks like you will have to spell them out individually if you want to only do padding-bottom and padding-left, or a combination similar to that.
When it comes to padding you can do something like:
.classname {padding: 10px inherit;}
That will set 10px for the top and bottom, and it will inherit the padding of its parent element.
Another option is:
.classname {padding: 10px initial;}
Initial will use the default value which is set for that element.
Depending on the types of elements, sometimes you use auto instead of initial.
By default, all four padding properties are set to 0.
You can set the padding with the shorthand notation, for example:
.yourclass{
padding: 0 10px 0 10px;
}
The order of elements in the shorthand version are: top, right, bottom, left.
Use another class to override the first one.
.first {
padding: 5px;
}
.second {
padding-left: 0 !important;
padding-right: 0 !important;
}
<div class="first second">no left/right padding</div>
I'm not using SASS, I'm using CSS. How can I remove the left padding from the right div? I want to remove the left padding only for when it's showing the large size column, if its size is smaller than the large size, I want it to stay using the left-padding (for mobile purposes).
example http://nsae01.casimages.net/img/2014/02/28/140228050513402376.jpg
Have you tried
.row.collapse?
What if you set a class for all sibling containers (i.e. columns) and set:
DIV.myColumnClass:first-child {
padding: 0px 20px; /* left and right padding */
}
DIV.myColumnClass {
padding: 0px 20px 0px 0px; /* right padding */
}
DIV.myColumnClass:last-child {
padding: 0px;
}
It's somewhat different: the first column will have left and right padding, the other columns just the right one, the last one no left or right padding.
.row.collapse makes margin equal to 0 not padding
Hi,
I'm using this code for a CSS3 Border Radius, how can I adapt it so that I only get a border radius on top?
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Thank you.
Use the side specific border radius rules.
Ex:
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
Note that the most recent versions of both Chrome and Firefox support the border-radius rule without the prefix whis is needed only for older versions.
Use:
border-radius:15px 15px 0 0;
-moz-border-radius:15px 15px 0 0;
-webkit-border-radius:15px 15px 0 0;
The order is: top left, top right, bottom right and bottom left.
Use the border-radius shorthand property:
border-radius:15px 15px 0 0; /* top-left, top-right, bottom-right, bottom-left */
I'm new to css and stuck and can't figure out what I am doing wrong. But I would like to have the foot show as three columns. If you look at the image layout and notice the footer has three columns well that's the i'm trying to achieve. Also the footer dotted lines show past the layout.
Here is my layout: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Here is the working site: http://www.gdisinc.com/barker/default.php#
Could you tell me what I have to do to fix it. Let me know if you have any questions?
The reason why the third <ul> goes down is because you have an extra 1px of border (border-right: 1px dotted #FFFFFF;).
The way you did it was having a 900px container and divide it into 3 columns. That's correct.
But once you added an extra border-right: 1px dotted #FFFFFF;, the column width become 301px (300px width + 1px border = 301px).
To solve this, either you make change the container size into 903px. Or you reduce the width size into 299px.
The other problem about
the footer dotted lines show past the layout.
Be careful with padding. When you add padding inside a div. It is counted as extra width.
Some part of your CSS for <ul> is:
width:902px;
padding:20px;
The total width is 902px (width) + 20px (left padding) + 20px (right padding) = **942px**
To fix this, you change the padding at your <ul> by using padding:20px 0px;. The first value represents top & bottom padding, the second value represents left & right padding.
2 solutions
increase width of the content
.content {
width: 903px;
}
or remove border of the last ul in content
.content ul:last-child {
border-right: 0;
}
add this css
.content {
padding:20px 0;
}
#footer ul {
margin: 0 0 0 20px;
width: 275px;
height:120px;
}
also add a class to last ul and add this
.last {
border:none;
}
better do this as suggested by Emrah
.content ul:last-child {
border-right: 0;
}
Your columns don't fit enough in a parent. Set style="border:none;" for the last column.
I want to use DL/DT/DD approach to organize my forms. I need to structure them as tables (a column for label and a column for value). The following html+css works fine but till I add margin or padding to dt and/or dd.
<html><head>
<style>
dl {
width: 100%;
overflow:hidden;
}
dt {
float: left;
width: 50%;
margin: 0px;
padding: 0px;
}
dd {
float: left;
width: 50%;
margin: 0px;
padding: 0px;
}
</style></head>
<body>
<dl>
<dt>first name</dt>
<dd><input />
</dl>
</body></html>
If I replace "margin: 0px" in dt's style with "margin: 5px" or the same for padding then dd element jumps on next row.
I need:
2-column table layout for DL
do not use absolute widths (that's because I'm using "50%" as columns' widths)
add some margin/padding to dt/dd
How to add margin/padding and keep relative widths (50%/50%)?
p.s. I've seen many similar questions about DL and table layout, but my question about combination of dl + table layout + relative widths + paddings. I can get it working with relative widths or paddings but not both.
All you need is to specify the magical property: box-sizing: border-box. You can then use padding all you want without increasing the width.
JSFiddle Demo
See also: box-sizing support in ie7
box-sizing addresses padding and borders, but not margins. If you want to use margin as well, use calc() to subtract the margin from the width. For example, if you want a 5px left margin:
dd {
margin: 0 0 0 5px;
width: calc(50% - 5px);
}
But, calc() does not work in IE8 or earlier.
more on calc()
I found a solution now (under the shower!)
Give the outer DL display:block and some padding to the left and right that add up to the margins and padding the DT and DD. Now the 100% of the DL are the basis for the 50% of the inner elements. Now give these your desired margins and paddings. Until now it won't work as desired. Yet there's things still to come. Add up all the margins and paddings of the DT and the DDrespectively. And give each a negative margin (the DT to the left and the DD to the right) so all the margins and paddings of them add up to zero/naught/niente/nada. E Voilà! Now you can have any combination of percentage you want, e.g. 30% - 70%.
dl {
display: block;
overflow:hidden;
padding: 5px 15px 5px 20px;
}
/* the -15px in the margin is to compensate for the 5px in the margin and the 2 x 5px in the padding */
dt {
float: left;
width: 30%;
margin: 0px 5px 0 -15px;
padding: 5px;
background: yellow;
}
/* the -10px in the margin is to compensate for the 2 x 5px in the padding */
dd {
float: left;
width: 70%;
margin: 0px -10px 0 0px;
padding: 5px;
background: yellow;
}
http://jsfiddle.net/HerrSerker/AADG7/
You just need to make sure that each dt clears the previous alignment;
add
dt {
clear:both;
}
to the css defined above
see http://jsfiddle.net/Nd2sH/
I would use nested DIVs or spans, inside the and elements. Right now, the 50% width is conflicting with the need for a padding or a margin.
Something like this would accomplish the same thing.
<dt><div style="margin:5px;">first name</div></dt>
<dd><div style="margin:5px;"><input /></div></dd>
The only things about it you can do:
Use JavaScript to get the width of the DL and then calculate the width of the DT and the DD so that the width of these plus the margin and the padding add up to the 100% of the DL
Or set a fixed width for the first column and no width for the second
Or wrap the content of each DT and DD with a DIV and give this the margin and padding