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>
Related
I wrote in parenthesis and in all caps, the things I am confused about in my homework instructions.
This is my homework instructions:
On the first line of your "main.css" file create a comment that reads "general". Under that comment write the following
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
Add the css line from the templates page (on the course website) that groups some selectors and sets them all to "display block".
Skip one line and write a comment that reads "wrapper". Under that comment write a css id of "wrapper" and add the following properties.
Give it a width of 1024px
Give it a margin property with the values of 0 and auto (margin: 0 auto centers the page on the browser window. We have to have a width to allow it to show that it is centered.)
Skip one line and write a comment that reads "main".
Put a border of 1px solid #000 around the left, right bottom of the main element.
(NOT SURE IF I DID THIS PORTION CORRECTLY ^)
Add a padding of 10px to the main element. We add a padding so the content will not butt up against the edge of the main element
Using a contextual selector select all the images within the divisional element with the id of "images" and set each image height to 90px, width to 120px and a margin of 20px around the image. We are using CSS to resize our images.
(NOT SURE HOW TO WRITE A CONTEXTUAL SELECTOR TO SELECT ALL THE IMAGES WITH THE DIV ELEMENT WITH THE ID of "images")
This is what I have created but am not sure if it is correct:
/* general */
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
*{margin: 0; padding: 0;}
article, aside, figure, footer, header, main, menu, nav, section {display: block;}
<style>
/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }
/* main */
main{border-left: solid 1px #000; border-bottom: solid 1px #000; border-right: solid 1px #000; padding: 10px; }
div images, #images {height: 90px; width: 120px; margin: 20px; }
</style>
The wording in your homework is incredibly poor, but what I believe you're looking for is to target all elements with an ID of images contained within a DIV. This would be:
div #images {
height: 90px;
width: 120px;
margin: 20px;
}
This will target any element with the ID of images inside any DIV, even if there is an element in between them (such as <div><span><img id="images"></span></div>). Note that you can also target direct descendants with >. div > #images will target <div><img id="images"></div>, but not <div><span><img id="images"></span></div>.
Keep in mind that having multiple elements on the page with the same ID is invalid markup, and the page will fail to validate correctly. The only situation where this would be valid is if your teacher is meaning to have a single element called #images on multiple different pages. You should use classes for targeting multiple elements on the same page. It's possible your teacher meant for you to use a class, which would be div .images.
As for your border, you have done it correctly, though note that you can set all four borders at once with the shorthand border:
main {
border: solid 1px #000;
padding: 10px;
}
Also, keep in mind that your second line should also be in a comment, or else it will throw a syntax error:
/*Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.*/
Hope this helps! :)
Hi i will try to answer this the best that i can, i am only a programming student so this is my best shot :)
First of all, id's has to be unique you cant have two identical id's on the same page.
If you have etc
<div id="test"></div>
<div id="test"></div>
And you try to style it like #test{background-color: red} only the last div will actually have a red background.
But basically this is what he wants:
/*--GENERAL--*/
*{
margin:0;
padding: 0;
}
/*--WRAPPER--*/
#wrapper{
width: 1024px;
margin: 0 auto;
}
/*--MAIN--*/
main{
border-left: 1px solid #000;
padding: 10px;
}
div #images img{
height: 90px;
width: 120px;
margin: 20px;
}
Examples of contextual selector
I hope this will help you with your programming journey! :)
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
Two inline-block elements next to each other.
.e{border:1px #ccc solid}
.e:hover{border-color:#555}
What I'd like is to reduce the 1px+1px border between them to a shared 1px border.
To illustrate.
---------
| | |
---------
Select first element.
+++++-----
+ + |
+++++-----
Select second element.
-----+++++
| + +
-----+++++
It's simple to reduce the 2px border to 1px by setting either border-right or border-left to 0, but how to keep the 1px shared border when either element is selected?
Without JavaScript.
You could give them a -1px left margin to get their borders overlapping and then undo that margin on the first one. Then adjust the z-index on hover (and don't forget position: relative to make the z-index work). Something like this:
.e {
border: 1px #ccc solid;
position: relative;
margin-left: -1px;
}
.e:first-child {
margin-left: 0;
}
.e:hover {
border-color: #555;
z-index: 5;
}
Demo: http://jsfiddle.net/ambiguous/XTzqx/
You might need to play with the :first-child a bit depending on how your HTML is structured; a couple other options if :first-child or another pseudo-class won't work:
Wrap it all in a <div> with padding-left: 1px to kludge around the margin-left: -1px .
Add an extra class to the first one that has margin-left: 0.
Make the :hover state have a 2px border and give it -1px margin on both sides. Make exceptions for :first-child and last-child assuming you don't have to care about every browser out there… I'm looking at you IE6/7
Of course, width: 100% on a block element fills the container, but only if border, padding, and margin are zero. Putting such an input in a containing div with padding does the trick, but I'm curious why simply input {display: block; width: auto;} doesn't work. Suggestions?
I agree with centr0 as to why width: auto doesn't work.
If you actually want to get an input to be full width of its container, then the following works. Given:
<div id="Container">
<form>
<input type="text" />
</form>
</div>
Do this with the css:
form {
padding: 0 0 0 14px;
}
input {
padding: 5px;
width: 100%;
margin: 0 0 0 -14px;
}
Explanation: Obviously, the -14px margin on the input counteracts the padding added to the form element. What is not so obvious is where the 14px came from. It is equal to the left/right 5px padding of the input plus the default for input element's border width (2px on all the browsers I tested). So 2 + 5 + 5 + 2 = 14.
To really be sure you are consistent cross-browser, you would want to explicitly set the border width to what you desired for the input. If you want a different padding (or thicker/thinner borders), then just redo the math. A 3px padding would be 10px instead of 14px, a 7px padding would be 18px instead of 14px.
For the example, you can set the width of #Container (could also be the body itself that is just defaulting to 100% of the page width) to what you desire, and the above css should match its width.
if i remember correctly the default size of input doesn't span the width of its container. "width: auto;" is like "resetting" the style back to its default value.
If you aren't using a Reset CSS Stylesheet then the input element will have some default styling set by the browser, this probably includes padding and margins.
also, width:auto will give the browser default. Try width:100%
Reset the container's padding resolves the problem.
td {
padding: 0 1em;
}
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.