Margins against <br /> ???

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Margins against <br /> ???

Post by jankidudel »

Hi, let's say I have 1 column 30px X 300px , which is divided into 2 parts , a: text, b: picture. I need some space between them, I can use margin or I can use couple of <br /> tags. What is the professional way ? I guess with css ?
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Margins against <br /> ???

Post by social_experiment »

Margins or padding i'd say.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Margins against <br /> ???

Post by Pazuzu156 »

Another possibility is within the <img> tag to add a vspace and an hspace, or like ankitaquilawebsL said:
I would suggest padding to avoid browser compatibility issues.

eg: for text use :- padding-left:19px;

i would suggest that.
Also, do a separate check too for any user using IE. IE doesn't like some styling like Chrome or Firefox does.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: Margins against <br /> ???

Post by jankidudel »

Where have you got these tags (vspace hspace ? ) :D
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Margins against <br /> ???

Post by Pazuzu156 »

They are arguments, not tags. Add them in your <img> tag. Example:

Code: Select all

<img src="images/image.jpg" width="25" height="25" alt="image" title="image" hspace="5" vspace="5" />
This will give you a horizontal space of 5 pixels and a vertical space of 5 pixels to a 25x25 pixel image.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: Margins against <br /> ???

Post by jankidudel »

Unfortunately they are deprecated :( , and I don't want to use bad style. :) , so better css.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Margins against <br /> ???

Post by social_experiment »

Have you considered something like this

Code: Select all

img {
 padding: 5px;
}
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Margins against <br /> ???

Post by Pazuzu156 »

social_experiment wrote:Have you considered something like this

Code: Select all

img {
 padding: 5px;
}
Or, use a class or id:

Code: Select all

/* Class */
.image {
    margin:5px;
    padding:5px;
}
/* ID */
#image {
    margin:5px;
    padding:5px;
}
Then fix your image up to do that:

Code: Select all

<!--class-->
<img src="images/image.jpg" size="25" height="25" alt="image" title="image" class="image" />
<!--id-->
<img src="images/image.jpg" size="25" height="25" alt="image" title="image" id="image" />
There you go, hope that helps.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Margins against <br /> ???

Post by social_experiment »

If you're using Pazuzu156's example go for the class option if you have multiple images on one page, each element should have a unique id.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: Margins against <br /> ???

Post by jankidudel »

Yea, I know about that :) , the start of the question was intented to understand why some html attributes aren't deprecated yet :D
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Margins against <br /> ???

Post by Pazuzu156 »

jankidudel wrote:Yea, I know about that :) , the start of the question was intented to understand why some html attributes aren't deprecated yet :D
The reason behind this is believe it or not, people still use IE 6 and under. I know I do when I'm using my Windows 98 Computer. Also, a lot of websites are out there, and not managed, or managed by one single person and they do not have the time to update all there code. Look at old websites and look at the codes, a lot of them happen to be deprecated. So, why allow deprecated tags to work? Easy, to allow the website that do not update their code to stay the way they are. Plus, for new web designers, developing of deprecated tags then being taught they should NOT be used, teaches them adequate web design.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Margins against <br /> ???

Post by social_experiment »

Pazuzu156 wrote:Easy, to allow the website that do not update their code to stay the way they are. Plus, for new web designers, developing of deprecated tags then being taught they should NOT be used, teaches them adequate web design.
If new designers start off correctly, by keeping the presentation layer seperate from other layers, it won't be necessary to use deprecated tags. You could use additional stylesheets to cater for older browsers. That is a much better practise than leaving deprecated (unvalid) tags in your pages and not being able to validate them.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: Margins against <br /> ???

Post by Pazuzu156 »

social_experiment wrote:
Pazuzu156 wrote:Easy, to allow the website that do not update their code to stay the way they are. Plus, for new web designers, developing of deprecated tags then being taught they should NOT be used, teaches them adequate web design.
If new designers start off correctly, by keeping the presentation layer seperate from other layers, it won't be necessary to use deprecated tags. You could use additional stylesheets to cater for older browsers. That is a much better practise than leaving deprecated (unvalid) tags in your pages and not being able to validate them.
You got a point, and most people have different stylesheets depending on the browser. Good way of explaining it.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Post Reply