css padding or margin?

adding whitespace

Page 1 of 1

14 Replies - 842 Views - Last Post: 14 September 2010 - 01:01 AM

#1 overcranked  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-April 10

css padding or margin?

Posted 09 September 2010 - 05:29 PM

I have two links on my page mostly written in html mostly with some in-line styles. My issue is that I have two links that I want on the same line, but I would like to be able to control how far apart they are from each other. I am a newbie sorry if this is super easy question.

<p style = "text-align:center;font-size:25px;color:#3F0">
<a href = "personal.html">Personal page</a>  <a href="acedemic.html">Academic page</a>
</p>


I had a &nbsp in there before and that added one whitespace but I would like more control of the amount of the distance...

Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: css padding or margin?

#2 danielair  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 22
  • View blog
  • Posts: 118
  • Joined: 12-July 09

Re: css padding or margin?

Posted 09 September 2010 - 05:40 PM

Hey there, heres how I learned to think of it, margin pushes the element away from other elements. Padding pushes the element's edges away making it bigger. For more information just visit the following pages

Margin: http://www.w3schools.../css_margin.asp
Padding: http://www.w3schools...css_padding.asp

Good luck,
Daniel
Was This Post Helpful? 0
  • +
  • -

#3 overcranked  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-April 10

Re: css padding or margin?

Posted 09 September 2010 - 06:01 PM

I have looked into both Ideas but what I cant figure out is how to use it with an in-line style to keep these two links apart?
Was This Post Helpful? 0
  • +
  • -

#4 danielair  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 22
  • View blog
  • Posts: 118
  • Joined: 12-July 09

Re: css padding or margin?

Posted 09 September 2010 - 06:30 PM

Generally you only use "inline" when you're using a list. "<ul>...<li>...</li>...</ul>". I threw together a little thing to help show you whats going on here. Play around with it and you'll probably understand. You learn by trying not having people tell you how to do it.

<html>
	<head>
		<style>
			p {
				text-align:center;
				font-size:25px;
				color: #3F0000;
			}

			a:link, a:visited {
				padding: 10px;
			}

			a:hover {
				color: black;
			}

			ul li {
				display: inline;
			}

			ul li a {
				padding: 10px;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<h2>Example With Just "Padding"</h2>
		<p>
			<a href="personal.html">Personal page</a><a href="acedemic.html">Academic page</a>
		</p>
		<hr>
		<h2>Example With "In-Line"</h2>
		<ul>
			<li><a href="personal.html">Personal page</a></li>
			<li><a href="acedemic.html">Academic page</a></li>
		</ul>
	</body>
</html>


Good luck,
Daniel
Was This Post Helpful? 0
  • +
  • -

#5 overcranked  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-April 10

Re: css padding or margin?

Posted 09 September 2010 - 07:14 PM

thank you again I am pretty new at this everything that I have learned I have taught myself out of W3 schools, I understand that in the padding example that you are basically creating all <p> tags in your code the that form with the padding and text centered, but what if I dont want change my <p> tag or call on a predetermined "class" (for lack of a better word) and I wanted to make the assignment at the line of code directly? Again thanks for the help I could not agree more about learning by trial and error but I am really stuck on this.
Was This Post Helpful? 0
  • +
  • -

#6 danielair  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 22
  • View blog
  • Posts: 118
  • Joined: 12-July 09

Re: css padding or margin?

Posted 09 September 2010 - 07:36 PM

Okay lets say you have 3 p tags and you want to have a different style for each, that what your question sounds like to me. You can assign an "id" or "class" to each one to edit them individually. Then you can still use the "p" in your CSS to edit all of them. I generally use id's for major elements and classes for minor ones. Take this example

<html>
	<head>
		<style type="text/css">
			body {
				margin: 0px;
			}

			p {
				margin: 0px;
			}

			#one {
				background: red;
				border-bottom: 1px solid blue;
				text-align: right;
			}

			.two {
				background: green;
				border-bottom: 1px solid purple;
				text-align: center;
			}

			#three {
				background: yellow;
				border-bottom: 1px solid orange;
				text-align: left;
			}
		</style>
	</head>
	<body>
		<p id="one">
			This is a "p" with the id "1"
		</p>
		<p class="two">
			This is a "p" with the class "two"
		</p>
		<p id="three">
			This is a "p" with the id "three"
		</p>
	</body>
</html>


Daniel
Was This Post Helpful? 0
  • +
  • -

#7 overcranked  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-April 10

Re: css padding or margin?

Posted 09 September 2010 - 07:46 PM

I am understand what you are saying but Its not what I mean here is the whole page 
<html>

<head>
<title>EA Jubrey</title>
</head>

<body background="cross.jpg">
<h1 style="text-align:center;color:#060">Welcome to Edward {Nick} Jubrey's</h1>
<h1 style="text-align:center;font-size:40px;color:#060"><code>webspace</code></h1>
<p style="text-align:center;font-size:30px;color:#060"><b>You have a choice</b></p>
<p style="text-align:center;font-size:25px;color:#3F0">
<a href="personal.html">Personal page</a><a href="acedemic.html">Academic page</a>
</p> 

<p style ="text-align:center" title = "behind the scenes">
<a href="pagenotes.html">Stay up to date</a>

</body>
</html>

I wanted to write the code in side the <p> tags it self not write it as a class before the <body>. does that make since?
Was This Post Helpful? 0
  • +
  • -

#8 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 994
  • View blog
  • Posts: 3,547
  • Joined: 05-June 09

Re: css padding or margin?

Posted 10 September 2010 - 05:47 AM

To do things properly, your styles wouldn't be on that page at all - They'd be in a seperate CSS file which you load in with <link /> within your <head> tags.

The distinct differences between padding and margin are that padding adds spacing on the inside, and margin adds spacing on the outside.
Was This Post Helpful? 0
  • +
  • -

#9 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: css padding or margin?

Posted 10 September 2010 - 06:00 AM 

<p style="text-align:center;font-size:25px;color:#3F0">
     <a style="margin-left:10px;" href="personal.html">Personal page</a><a href="acedemic.html">Academic page</a>
</p>


That should create the effect your after.

On anchors, if you use display block, padding will provide a larger clickable area aposed to margin which wont, as RudiVisser says above, padding creates space inside the element (padding the element out) and margin gives space outside, like the margin on school exersise books and lined paper.


With regards to danielair's comment on ID's and classes, while it comes down to personal preference on how you use them, generally you should use ID's for items that are used once, for example the main navigation could have an ID of #navigation where as a text display block like a span for errors with red text and a background colour would have a class of .error since it could be used more than once.
Was This Post Helpful? 0
  • +
  • -

#10 enigmamoirai  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 19
  • Joined: 10-September 10

Re: css padding or margin?

Posted 10 September 2010 - 08:57 AM

View PostPhunkRabbit, on 10 September 2010 - 05:00 AM, said:

On anchors, if you use display block, padding will provide a larger clickable area aposed to margin which wont,


This is a useful piece of information that isn't taught in schools. While the uses of padding are taught, I wouldn't think to apply it to a link for easier clicking access. I ususally run into this problem with links that are within a paragraph of text.
Was This Post Helpful? 0
  • +
  • -

#11 jumptrooper  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 68
  • View blog
  • Posts: 234
  • Joined: 19-August 10

Re: css padding or margin?

Posted 10 September 2010 - 10:05 AM

A great way to play around with CSS to figure out what work for what you're trying to accomplish is to download the "firebug" plugin for Firefox. Once installed, there will be a little bug icon in bottom right corner of the browswer window. Clicking on it brings up a console-like screen which allows you to select html elements and view/change/add their associated CSS (non-destructively). Once you figure out what settings you want, you can go back to your source code and make the permanent changes necessary. It also has a "layout" tab that visually shows how the margin/border/padding dimensions are interacting.
Here's a link:
Firebug
Was This Post Helpful? 0
  • +
  • -

#12 overcranked  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-April 10

Re: css padding or margin?

Posted 10 September 2010 - 01:27 PM

@ Phunk Rabbit thank you so much this is almost exactly what I was looking for. margin-left pushed my links over to the right but I was able to reconfigure it slightly with padding, here is what fixed it.

<p style="text-align:center;font-size:25px;color:#3F0">
<a style ="padding-right:400px;" href ="personal.html">Personal page</a><a href="acedemic.html">Academic page</a>
</p>


Thank you all for your help, that was really bugging me!

I had no Idea I could add style to the anchor its self DUH! Newbie!
Was This Post Helpful? 0
  • +
  • -

#13 overcranked  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-April 10

Re: css padding or margin?

Posted 11 September 2010 - 05:26 PM

View PostPhunkRabbit, on 10 September 2010 - 05:00 AM, said:

<p style="text-align:center;font-size:25px;color:#3F0">
     <a style="margin-left:10px;" href="personal.html">Personal page</a><a href="acedemic.html">Academic page</a>
</p>


That should create the effect your after.

On anchors, if you use display block, padding will provide a larger clickable area aposed to margin which wont, as RudiVisser says above, padding creates space inside the element (padding the element out) and margin gives space outside, like the margin on school exersise books and lined paper.


I probably should read this through, looks like I should of used margins after all!!
Was This Post Helpful? 0
  • +
  • -

#14 Guest_cristall*


Reputation:

Re: css padding or margin?

Posted 14 September 2010 - 12:56 AM

you might get some ideas to work on your links/padding.

http://iamcristall.w...tableless-menu/
Was This Post Helpful? 0

#15 cristall  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 13-September 10

Re: css padding or margin?

Posted 14 September 2010 - 01:01 AM

just use position:inline, then add padding values.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1