2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

" the percentage value is calculated based on the width of
the parent element. If the parent’s width changes, so will the margins on all
four sides of the child element . "

What does the above mean ? can someone please explain with an example ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Example

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    font: normal 100%/1.25 sans-serif;
    }
 
  p {
    font-size: 1em;
    }
 
  div {
    border: 1px solid black;
    margin: 1em 0;
    }
 
  #outer1 {}
 
  #outer2 {
    width: 500px;
    }
 
  .inner {
    margin: 5% 10%;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="outer1">
    <div class="inner">
      <p>This is a box with side margins set @ 5 &amp; 10%.</p>
    </div>
  </div>
 
  <div id="outer2">
    <div class="inner">
      <p>This is a box with side margins set @ 5 &amp; 10%.</p>
    </div>
  </div>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thank you gary

Thank you gary , for your explanation , it really helped .