{"id":12237,"date":"2011-11-24T03:09:42","date_gmt":"2011-11-24T08:09:42","guid":{"rendered":"http:\/\/info.template-help.com\/?p=12237"},"modified":"2016-11-11T04:03:15","modified_gmt":"2016-11-11T09:03:15","slug":"css-understanding-border-margin-and-padding-properties","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/css-understanding-border-margin-and-padding-properties.html","title":{"rendered":"CSS. Understanding border, margin and padding properties"},"content":{"rendered":"<p>This tutorial will help you to better understand the border, padding and margin CSS properties. These properties helps much the web developers to arrange the elements on the web-page the needed way. <\/p><!--more-->\r\n\r\n<p>Let&#8217;s create some div and assign the margin, padding and border properties. <\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/11\/css-box-model-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/11\/css-box-model-1-231x300.jpg\" alt=\"\" title=\"css-box-model-1\" width=\"231\" height=\"300\" class=\"aligncenter size-medium wp-image-12238\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/css-box-model-1-231x300.jpg 231w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/css-box-model-1.jpg 342w\" sizes=\"(max-width: 231px) 100vw, 231px\" \/><\/a>\r\n\r\n<h3>Padding property<\/h3>\r\n\r\n<p> The CSS padding properties define the space between the element border and the element content. You can define the padding value the following way:<\/p>\r\n\r\n<ul class=\"post-list\">\r\n\t<li>padding-top: 10px;<\/li>\r\n\t<li>padding-right: 10px;<\/li>\r\n\t<li>padding-bottom: 10px;<\/li>\r\n\t<li>padding-left: 10px;<\/li>\r\n<\/ul>\r\n\r\n<p>You can also use the shortand property:<\/p>\r\n\r\n<ul class=\"post-list\">\r\n  <li><strong>padding:25px 50px 75px 100px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>top padding is 25px<\/li>\r\n      <li>right padding is 50px<\/li>\r\n      <li>bottom padding is 75px<\/li>\r\n      <li>left padding is 100px<\/li>\r\n    <\/ul>\r\n    <br>\r\n  <\/li>\r\n  <li><strong>padding:25px 50px 75px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>top padding is 25px<\/li>\r\n      <li>right and left paddings are 50px<\/li>\r\n      <li>bottom padding is 75px<\/li>\r\n    <\/ul>\r\n    <br>\r\n  <\/li>\r\n  <li><strong>padding:25px 50px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>top and bottom paddings are 25px<\/li>\r\n      <li>right and left paddings are 50px<\/li>\r\n    <\/ul>\r\n    <br>\r\n  <\/li>\r\n  <li><strong>padding:25px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>all four paddings are 25px<\/li>\r\n    <\/ul>\r\n  <\/li>\r\n<\/ul>\r\n\r\n<p><\/p>\r\n<p class=\"tip\">Note: the padding value is added to the element width and is affected by the element background. <\/p>\r\n<p>In other words we have the element div with class div-1:<\/p>\r\n\r\n<pre class=\"brush:css\">\r\ndiv.div-1{\r\nwidth:150px;\r\npadding: 25px;}<\/pre>\r\n\r\n<p>The browser with add the left and right padding values to the box width. As a result you&#8217;ll see the box that&#8217;ll be of 200px width. <\/p>\r\n\r\n\r\n<h3>Border property<\/h3>\r\n\r\n<p>The CSS border properties allow you to specify the style and color of an element&#8217;s border.<\/p>\r\n\r\n\r\n<h4>border-width<\/h4>\r\n\r\n<p>The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.<\/p>\r\n\r\n\r\n\r\n<h4>border-color<\/h4>\r\n\r\n<p>The border-color property is used to set the color of the border. The color can be set by:<\/p>\r\n\r\n<ul class=\"post-list\">\r\n\t<li>name &#8211; specify a color name, like &#8220;red&#8221;<\/li>\r\n\t<li>RGB &#8211; specify a RGB value, like &#8220;rgb(255,0,0)&#8221;<\/li>\r\n\t<li>Hex &#8211; specify a hex value, like &#8220;#ff0000&#8221;<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h4>border-style<\/h4>\r\n\r\n<ul class=\"post-list\">\r\n\t<li><strong>dotted<\/strong>: Defines a dotted border<\/li>\r\n\t<li><strong>dashed<\/strong>: Defines a dashed border <\/li>\r\n\t<li><strong>solid<\/strong>: Defines a solid border <\/li>\r\n\t<li><strong>double<\/strong>: Defines two borders. The width of the two borders are the same as the border-width value <\/li>\r\n\t<li><strong>groove<\/strong>: Defines a 3D grooved border. The effect depends on the border-color value <\/li>\r\n\t<li><strong>ridge<\/strong>: Defines a 3D ridged border. The effect depends on the border-color value <\/li>\r\n\t<li><strong>inset<\/strong>: Defines a 3D inset border. The effect depends on the border-color value <\/li>\r\n\t<li><strong>outset<\/strong>: Defines a 3D outset border. The effect depends on the border-color value<\/li>\r\n<\/ul>\r\n\r\n<p>Using the shortand property you can define the element border the following way:<\/p>\r\n\r\n<pre class=\"brush:css\">\r\ndiv.div-2{\r\n\tborder:1px solid #ccc;\r\n    }\r\n<\/pre>\r\n\r\n<h3>Margin property<\/h3>\r\n\r\n<p>The CSS margin properties define the space around elements. The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.<\/p>\r\n\r\n<p>You can define the element margin values the following way:<\/p>\r\n\r\n<ul class=\"post-list\">\r\n\t<li>margin-top:100px;<\/li>\r\n\t<li>margin-bottom:100px;\t  <\/li>\r\n\t<li>margin-right:50px;\t  <\/li>\r\n\t<li>margin-left:50px;<\/li>\r\n<\/ul>\r\n\r\n<p>You can also use the shortand property:<\/p>\r\n\r\n<ul class=\"post-list\">\r\n  <li><strong>margin:25px 50px 75px 100px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>top margin is 25px<\/li>\r\n      <li>right margin is 50px<\/li>\r\n      <li>bottom margin is 75px<\/li>\r\n      <li>left margin is 100px<\/li>\r\n    <\/ul>\r\n    <br>\r\n  <\/li>\r\n  <li><strong>margin:25px 50px 75px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>top margin is 25px<\/li>\r\n      <li>right and left margins are 50px<\/li>\r\n      <li>bottom margin is 75px<\/li>\r\n    <\/ul>\r\n    <br>\r\n  <\/li>\r\n  <li><strong>margin:25px 50px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>top and bottom margins are 25px<\/li>\r\n      <li>right and left margins are 50px<\/li>\r\n    <\/ul>\r\n    <br>\r\n  <\/li>\r\n  <li><strong>margin:25px;<\/strong>\r\n    <ul class=\"post-list\">\r\n      <li>all four margins are 25px<\/li>\r\n    <\/ul>\r\n  <\/li>\r\n<\/ul>\r\n<p>Using the auto value for the margin property you can center the block horizontally. <\/p>\r\n\r\n<pre class=\"brush:css\">\r\ndiv.div-3{\r\n\tmargin: 0 auto;\r\n    }\r\n<\/pre>\r\n<p>If you want to know more about templates with CSS functionality, browse our <a href=\"https:\/\/www.templatemonster.com\/admin-templates.php\" title=\"Bootstrap Admin Themes\" target=\"_blank\">Bootstrap Admin Themes<\/a>.<\/p>\r\n\r\n<!--more-->\r\n\r\n<!--more-->\r\n\r\n\r\n\r\n\r\n\r\n<!--more-->","protected":false},"excerpt":{"rendered":"<p>This tutorial will help you to better understand the border, padding and margin CSS properties. These properties helps much the web developers to arrange the elements on the web-page the needed way.<\/p>\n","protected":false},"author":2,"featured_media":12240,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256],"tags":[1109,514,1110,1108],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/12237"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=12237"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/12237\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/12240"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=12237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=12237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=12237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}