I saw a little conversation about this the other day and figured it would be fun to look at all the different ways to do it. None of them are particularly tricky, but perhaps you’ll favor one over another for clarity of syntax, efficiency, or otherwise.
Let’s assume we want a border on the bottom, left, and right [but not top] of an element.
Explicitly declare each side
.three-sides {
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
}
While that’s pretty clear, it’s still making use of shorthand. Completely expanded it would be like this:
.three-sides {
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: black;
border-left-style: solid;
border-left-width: 2px;
border-right-color: black;
border-right-style: solid;
border-right-width: 2px;
}
Knock off one of the sides
You can save a little code by declaring the border on all four sides with shorthand and then removing the one you don’t want:
.three-sides {
border: 2px solid black;
border-top: 0;
}
Shorthand just the width
.three-sides {
border-color: black;
border-style: solid;
/* top, right, bottom, left - just like margin and padding */
border-width: 0 2px 2px 2px;
}
As a fun little aside here, you don’t need to declare the border color to get a border to show up, because the color will inherit the currentColor
! So this would work fine:
.three-sides {
/* no color declared */
border-style: solid;
border-width: 0 2px 2px 2px;
}
And you’d have red borders if you did:
.three-sides {
border-color: red;
border-style: solid;
border-width: 0 2px 2px 2px;
}
Strange, but true.
If you want to add the color explicity, you can kinda mix-and-match shorthand, so this will work fine:
The CSS padding
properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element [top, right, bottom, and left].
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:
- length - specifies a padding in px, pt, cm, etc.
- % - specifies a padding in % of the width of the containing element
- inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
Example
Set different padding for all four sides of a
div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; }
Try it Yourself »
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties in one property.
The padding
property is a shorthand property for the following individual padding properties:
padding-top
padding-right
padding-bottom
padding-left
So, here is how it works:
If the padding
property has four values:
- padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
Example
Use the padding shorthand property with four values:
div { padding: 25px 50px 75px 100px; }
Try it Yourself »
If the padding
property has three values:
- padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
Example
Use the padding shorthand property with three values:
div { padding: 25px 50px 75px; }
Try it Yourself »
If the padding
property has two values:
- padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
Example
Use the padding shorthand property with two values:
div { padding: 25px 50px; }
Try it Yourself »
If the padding
property has one value:
- padding: 25px;
- all four paddings are 25px
Example
Use the padding shorthand property with one value:
div { padding: 25px; }
Try it Yourself »
Padding and Element Width
The CSS `padding`5 property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element [the box model].
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
Example
Here, the
div { width: 300px; padding: 25px; }
Try it Yourself »
To keep the width at 300px, no matter the amount of padding, you can use the `padding`6 property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.
What is the order of top left right bottom in CSS?
Position properties Just like margins and paddings, the inset values are ordered clockwise - top, right, bottom, then left [TRBL].
What are the top bottom left right properties in CSS?
The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset. An absolutely positioned element is an element whose computed position value is absolute or fixed .
How do you align text to the bottom right in HTML?
First you should use tag. It help your content to keep in bottom then you can use css property text-align : right; I hope this will help you!
How do I position a div in the bottom right corner?
So what you do is have a wrapper div that has position:relative; filling the whole screen and then you position the div you want with position:absolute; . If however your site scrolls down you need to use CSS expressions in IE6 to keep the div docked to the bottom right corner.