/    Sign up×
Community /Pin to ProfileBookmark

Padding about images within text

I have a biography part on a website that I have a text biography typed out and images within the text alligned left or right.. how do I give those images a little space around them like padding? Sorry I know it’s a stupid question to most of you, but I don’t know.

to post a comment
HTML

3 Comments(s)

Copy linkTweet thisAlerts:
@tracknutMay 08.2007 — How about something like <img src="pic.jpg" style="padding:5px;">

Dave
Copy linkTweet thisAlerts:
@ray326May 08.2007 — Use margins or padding as Dave suggests but you'll probably need to take into account whether the image is on the left or right rather than applying the separation to all sides equally.
Copy linkTweet thisAlerts:
@WebJoelMay 08.2007 — I have actually had good success if the images are of the same size, by creating two 'classes' ([I]left[/I] and [I]right[/I]), and using a set-value margin (in this case, 8-px all-around). Note that the 'class' of [I]left[/I] or of [I]right[/I] the only difference, is that they are 'floated' so that text wraps around them in a fixed-width DIV container..

[B]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">[/B]


<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

[B]<style>

.left {width:120px; height:75px; border:1px solid gray; margin:8px; [COLOR="Red"]float:left;[/COLOR]}

.right {width:120px; height:75px; border:1px solid gray; margin:8px; [COLOR="Red"]float:right;[/COLOR]}

</style>[/B]


<script type="text/javascript"><!--

// -->

</script>

<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->

</head>

<body>

[B]<div style="width:430px; height:auto; padding:25px 10px 20px 10px; margin:25px auto; border:2px solid black;">

<h1>Images in text</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit.

[COLOR="Red"]<img alt="left image" class="left" src="#" />[/COLOR]Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.[COLOR="Red"]<img alt="right image" class="right" src="#" />[/COLOR]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

</div>[/B]


</body>

</html>[/QUOTE]
×

Success!

Help @exposd513 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...