html - CSS how to push text away from border -
basically have code container holds widgets @ side of side:
however can see text touching border. there anyway fix this? not sure how in css.
.widget { margin-bottom:20px; border-style:clear; } .widget h2 { margin:0 0 10px 0; padding:0 5px; font-weight:normal; border-bottom:1px solid #21a1e1; } .widget .inner { margin:0 10px; border-style:clear; } /* aside */ aside { width:260px; float:right; border-top: 1px solid #21a1e1; border-left:1px solid #21a1e1; border-right: 1px solid #21a1e1; border-bottom: 1px solid #21a1e1; padding-left:0px; }
assuming aside
class class sidebar, can add margin-left: 20px;
(or whatever value want) class definition:
aside { width: 260px; float: right; border-top: 1px solid #21a1e1; border-left: 1px solid #21a1e1; border-right: 1px solid #21a1e1; border-bottom: 1px solid #21a1e1; padding-left: 0px; margin-left: 20px; // add here }
the margin outside of border (see image below, it's chrome developer tools. blue content of element, padding inside space of element, yellow border , margin outside space of element. notice there black box around border, that's edge of element itself, margin additional space on outside.
Comments
Post a Comment