Padding doesn't get displayed_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-22 00:17 出处：网络

If width of a viewport is set to 1024px and if I create the following html docume开发者_如何学运维nt:

相关专题：css xhtml

If width of a viewport is set to 1024px and if I create the following html docume开发者_如何学运维nt:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <style type="text/css">
       p
       {
           background-color:blue;
           padding:0px 250px;
           margin:0px 250px;
           overflow:scroll;
       }
   </style>
 </head> 
 <body>
       <p>
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
       </p>
  </body>
</html>

then I would expect that ( due to p element providing horizontal scroll bars ) padding on both sides of p element would still be 250px in size . But while padding on left side of p element is still 250px, padding on right side equals zero pixels?

What is the reason for such behavior? Is it because only text can be clipped (and viewed with the help of scroll bars), while if padding is clipped, then it simply doesn’t get rendered?

thanx

Padding can be problematic on browsers. Some push the edge of the element out while others push the content in (which is what I suspect you're expecting). You will have a way easier time by setting the margin to achieve the same effect.