3 Replies - 6764 Views - Last Post: 28 January 2012 - 09:50 AM

#1 Funked  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 27-January 12

Make a space between text and border in CSS?

Posted 27 January 2012 - 03:36 PM

Hey guys :) I use this site a lot for help, but today I can't seem to find what I'm looking for! So I registered, and hopefully some of you can help me out :)

I'm a university student studying Computing, and one of my modules is Web & Multimedia. We have to make an e-Portfolio, so I'm using an old website I built in college and updating it. One thing that is really annoying me is there's no space between the text and border in the content section. I've tried all sorts of padding and margins, but it keeps offsetting the whole content. Can you take a look at my CSS style sheet and possibly tell me where I'm going wrong? I may need to change some other things like the fixed position of the body etc. I've only learnt the basics of HTML and CSS so it's a very basic style sheet! Thanks!


html, body {
margin:0px;
padding:0px;
background-color:#CCC;
height:100%;
width:100%;
background-image:url(../Images/os_x_lion_galaxy_hd.jpg);
background-attachment:fixed;
}

#container{
margin-left:auto;
margin-right:auto;
width:800px;
height:100%;
background-color:#CCC;
}

#header{
width:800px;
height:150px;
background-color:#CCCF;
}

#navigation{
width:800px;
}

#content{
margin-left:auto;
margin-right:auto;
width:800px;
background-color:#CCC;
}



Is This A Good Question/Topic? 0
  • +

Replies To: Make a space between text and border in CSS?

#2 creativecoding  Icon User is offline

  • Hash != Encryption
  • member icon


Reputation: 926
  • View blog
  • Posts: 3,205
  • Joined: 19-January 10

Re: Make a space between text and border in CSS?

Posted 27 January 2012 - 04:52 PM

Make your width 5px less than it is now and make your padding-left 5px more.
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Make a space between text and border in CSS?

Posted 27 January 2012 - 05:09 PM

The padding is included in the actual "width" of elements, so if you define it to have width: 100px; and padding: 5px;, the element will actually be 110px wide.

Check out this page about the Box Model. It explains exactly how this works. (You can also see this, for a bit less detailed explanation.)
Was This Post Helpful? 0
  • +
  • -

#4 Funked  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 27-January 12

Re: Make a space between text and border in CSS?

Posted 28 January 2012 - 09:50 AM

Thanks for the replies guys, although I still can't seem to get it working. I've changed the width on everything to 790px, and added padding (left and right) to 5px on them all too. Some parts of it are overlapping on the edge, like the #navigation box isn't inline with the rest of the page etc. I just can't figure out where I'm going wrong! Where am I meant to edit the width and padding, what #section? This is probably a very simple thing to do but it's going straight over my head!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1