Results 1 to 3 of 3

Thread: [RESOLVED] CSS padding making element go outside container

  1. #1

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    Resolved [RESOLVED] CSS padding making element go outside container

    Practicing some css to get things a bit more centered, especially with dynamic elements. So the code below is my test page.

    I ran it here on firefox, chrome and edge; the spans have padding that pushes outside the containing div/span. I would have thought the container would expand to cover the contents, but it didn't.

    Messing with display sometimes gets it to work, but then seems to negate the center.

    Probably simple, but can someone explain why or give a link to a site that explains why ?

    Code:
    <html>
    <head>
    <style>
    
    * {
    /* force the box to be the box... */
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    	
    }
    
    .borderblk {
    	border: solid 1px black;
    }
    .borderblue {
    	border: solid 1px blue;
    }
    .borderred {
    	border: solid 1px red;
    }
    .spaceme{
    	margin-top: 8px;
    }
    .padme {
    	padding: 10px;
    	box-sizing : border-box;
    }
    .circleme{
    	width:52px;
    	height: 52px;
    	border-radius:26px;
    	text-align:center;
    	display:table-cell;
    	vertical-align:middle;
    }
    
    .testcenter1{
    	text-align:center;
    	vertical-align: middle;
    	margin: 0 auto;
    }
    </style>
    </head>
    <body>
    
    <div class="borderblk spaceme ">
    <div class="borderred testcenter1">
    <span class="borderblue padme ">some content</span>
    <span class="borderblue padme ">some content</span>
    </div>
    </div>
    
    <div class="borderblk spaceme">
    <span class="borderred testcenter1">
    <span class="borderblue padme">some content</span>
    <span class="borderblue padme ">some content</span>
    </span>
    </div>
    
    <div class="spaceme">
    <span class="borderblk circleme">02</span>
    </div>
    
    
    </body>
    </html>

    BOFH Now, BOFH Past, Information on duplicates

    Feeling like a fly on the inside of a closed window (Thunk!)
    If I post a lot, it is because I am bored at work! ;D Or stuck...
    * Anything I post can be only my opinion. Advice etc is up to you to persue...

  2. #2
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Re: CSS padding making element go outside container

    Hi,

    Since you set your span elements with padding, you may set the top and bottom paddings of the divs too. This is just an option.

    -kgc
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

  3. #3

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    Re: CSS padding making element go outside container

    Hi thanks.

    I think I found out why... On another page somewhere on the internet. It stated that the inline type of element ignores top and bottom (ie will not expand to accompany those) where as the block element will move. I think it's this.

    Rethought out the code...

    Now works.

    Thanks for viewing, and something else for me to remember in the future

    BOFH Now, BOFH Past, Information on duplicates

    Feeling like a fly on the inside of a closed window (Thunk!)
    If I post a lot, it is because I am bored at work! ;D Or stuck...
    * Anything I post can be only my opinion. Advice etc is up to you to persue...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width