I have a paragraph on a web page with 20 pixel margins on all 4 sides. I want to alter just the top and bottom paddings with a single property (so padding-top:0;padding-bottom:0; will not do).
What I have tried is demonstrated here.
http://jsfiddle.net/nFCru/1/
In this Fiddle, I tried to use padding: 30px inherit; to alter just the top and bottom paddings of a paragraph. However, this property-value pair sets the left and right paddings to 0 in addition to altering the top and bottom paddings.
p {
border: 1px solid #000;
padding: 20px;
}
/*
* Here's my failed attempt at only altering the top
* and bottom padding values. The left and right padding
* values are changing even if I use inherit.
*/
p {
padding: 30px inherit;
}
Can I alter only the top and bottom paddings with one property?
No, you can't. inherit means the element inherits the padding from its parent. That is, the body (or whatever element the p sits in), not the "original" p in the stylesheet. To leave the left and right padding intact, all you can do is use the two properties as you described.
In short, no.
The only allowable attributes for padding are width (fixed) or percentage, or inherit (from the parent element). There is no way to inherit values already set.
To set the individual padding values you must use the individual properties.
See http://www.w3.org/TR/CSS2/box.html#padding-properties
Until now you couldn't. But even though this is a very old question I thought I'd update it with a new answer.
With the CSS Logical Properties and Values draft you will be able to do this in the future.
It allows you to specify the start and end of a block or inline padding which is dependent on writing mode and direction instead of simple left-to-right based on the screen in front of you.
If you wanted to specify a 10px padding on the top and bottom of an element you could achieve this with the following for example:
.element {
padding-block: 10px;
}
Although not yet supported by any browsers you could already use this in your projects by using PostCSS with the PostCss Preset-Env plugin.
If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.
Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.
p{
border: 1px solid #000;
padding: 20px;
}
p.another{
padding: 30px 20px;
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>
Related
Newbie question: Can someone tell me what is governing the height of the menu with inspect element? (this is a wp template) Changing the padding on the ".li a {" makes the menu buttons smaller but I cant seem to vertically shrink the container..
Thanks for spotting it in advance!
If the height property is not explicitly stated, it is inherited from one of its ancestor.
If .li a contains the padding property with value 10px, then you must alter the values like
.li a {
padding: 5px 10px 5px 10px; // Padding: top right bottom left
}
Thus we need to work with top and bottom values only.
I have a page which contains a table.
The <tr>'s have a border-bottom: 1px dotted black;, but as you can see from the image below, they are rendering quite strangely. Does anyone know why this might be?
Relevant CSS
.basket-item{
border-bottom: 1px dotted black;
border-top: 1px dotted black;
padding: 10px 0;
}
.basket-item td:nth-of-type(2){ //included this as it seems to be the second td in every row
padding: 25px;
vertical-align: top;
text-align: left;
}
HTML structure is a standard table, <tr>'s have a class of .basket-item
Thanks in advance for any help
Extending from comment:
This problem seems to only/mainly affects Chrome (or WebKit), and after some unsuccessful trial, I finally come up with this:
add
h4 {
margin-bottom: 1.5em; /* or whatever length that ends in an integer pixel */
}
The reason for this, is that you have specified
font-size: 14px;
And Chrome has an internal CSS that looks like:
h4 {
-webkit-margin-before: 1.33em; /* works like margin-top */
-webkit-margin-after: 1.33em; /* works like margin-bottom */
}
That makes a floating point number pixel (14 * 1.33 = 18.62), and (probably with other elements below, especially float: left elements), Chrome seems to have the need to "calculate" the remaining space height for "placeholder", and finally ends up with a floating point number that is "very close to 200px".
Observation:
In my Chrome, the <td> should be 250px height (including padding). That <td> has padding: 25px, so the "inner height" should be 200px, but with default style, in developer tool, Chrome shows that the <td> is actually 199.609375px height. Overwriting the margin-bottom of h4 to an integer "normalized" the inner height back to 200px.
It's obviously the table display ; if you change your td or your tr to another display (like inline-block), it disappear, but your layout is broken.
It also seems to depend on the zoom level of the viewport : if you scale up, you can make the weird border disappear (both top and bottom border) : the height of tr and td switch from 250px to 251px sometimes.
With so few information, I can't deduce another parameter to change.
Without any actual solution, consider changing your display type, for either tror td, and adapt your layout to fit you requirement.
I am building a page using blocks of sections:
http://jsfiddle.net/NrkTn/3/
You can see I have added margin to the section elements, however I'm unable to add both top and bottom margins, it uses whichever is the largest value.
Each section should have a top and bottom margin of 20px, making the space between them 40px, however it is showing a margin of only 20px.
Margins collapse on themselves: http://jsfiddle.net/NrkTn/4/
That is expected behavior. It will always take the largest margin and not a combination of the two. Here's an article that explains this.
Margins collaspe on themselves, so that is expected behavior. You could do what you want by changing your section CSS to use borders instead
#page section{ border-top: 20px solid white; border-bottom: 20px solid white; }
http://jsfiddle.net/SAcK8/
Another way to do what you want is to wrap your sections in divs and use padding
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
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.