Home/ Questions/Q 512353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:18:40+00:00

We can set the padding and margin properties of an element E using either

  • 0

We can set the padding and margin properties of an element E using either pixels or percentages.

A) I assume that when we use percentages, the percentage value refers to the width of the containing block? Thus, if E is declared directly inside <body> element, then the containing block is <body> and percentage value refers to width of <body>element.

B) What is the default width of a <body>element?

Thanks.

EDIT:

If I set E’s padding to 50%:

   #E
   {
      padding: 50%;
   }

then the width of E’s “padding-left + padding-right” will equal the width of a viewport (when viewport is expanded over the entire screen).

A) Thus, I assume the width (specified in pixels) of <body> depends on a horizontal resolution of a monitor and the width of a viewport? My screen resolution is set to 1024*768, and thus in my case the width of a <body> is 1024px (assuming viewport is expanded over the entire screen) ? But if I was to change the resolution to 800*600, then the width of a <body> would be 800px?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1. Yes, the CSS will be applied to the element containing it.

    2. The default width in percentages for the <body> tag is 100%.

    In general, you should be using a CSS file linked to your HTML, and use CSS Selectors to chose what elements to style. It is bad practice to embed CSS into your HTML, as this is not very maintainable (i.e. if you need to change the style across a website).

    Edit:

    #E { padding: 50%; }

    is a shortcut to:

    #E { padding-top: 50%; padding-right: 50%; padding-left: 50%; padding-bottom: 50%;}

    In regards to what the % stand for, it’s viewport width, i.e. the number of pixels in the inner browser window, showing the HTML, nothing to do with your screen resolution.

    If you were to change your window resolution to 800px*600px your viewport width would be somewhat less than 800px, as the scrollbar takes up some of that.

    • 0