1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML image attribute for padding?

Discussion in 'HTML & Website Design' started by RogerDodgr, Jun 29, 2009.

  1. #1
    Is there an HTML attribute to put padding around an image?
     
    Solved! View solution.
    RogerDodgr, Jun 29, 2009 IP
  2. #2
    There are several methods. One is:
    hspace="5" vspace="5" (or whatever number you want to use)

    The other is <style="padding:5px;"> or you can use the padding attribute within an external stylesheet, which is recommended.
     
    belgirl, Jun 29, 2009 IP
    RogerDodgr likes this.
  3. RogerDodgr

    RogerDodgr Well-Known Member

    Messages:
    267
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    105
    #3
    Thanks belgirl. I added to your rep. I understand the hspace tip, but...
    Does the style="padding:5px;" go inside the <img src=...> tag?

    Edit:
    Incidently, I understand the importance of separating style, html, and logic when possible. This is just an exception where I need a quick method to insert into the html.
     
    RogerDodgr, Jun 29, 2009 IP
  4. belgirl

    belgirl Greenhorn

    Messages:
    64
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    20
    #4
    Glad I could help. Using sample numbers etc., the code would be:

    <img src="images/yourimage.jpg" width="200" height="200" style="padding:5px;" />
     
    belgirl, Jun 29, 2009 IP
  5. spicetrader

    spicetrader Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I used "style="padding:10px;"" with superb effect in a WordPress text widget. Glad to have this trick. Thanks.
     
    spicetrader, Jul 18, 2010 IP
  6. alamest

    alamest Well-Known Member

    Messages:
    277
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    133
    #6
    Inside the widget you don't need to use padding or so, just type it, padding is all the time used in CSS if you know how to use it or edit... I sometimes use padding or margin depends on the situation..
     
    alamest, Apr 24, 2012 IP
  7. NewHDD-Blog

    NewHDD-Blog Member

    Messages:
    103
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #7
    you can type it...
    img {
    padding:5px;
    }
     
    NewHDD-Blog, Apr 25, 2012 IP
  8. web.seowrkshop

    web.seowrkshop Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    there are varius menthos to keep padding around image. we can place img in div tag and can give padding to div, then w can give the paddng ttribute to image tag itself
     
    web.seowrkshop, Apr 27, 2012 IP
  9. Carelmulder

    Carelmulder Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Not sure if it will work but try:

    img {
    padding-left:;
    padding-right:;
    padding-top:;
    padding-bottom:;
    }
     
    Carelmulder, Sep 10, 2012 IP
  10. osalem

    osalem Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    <img src="aaaa/a/a/a.jpg" style="padding:5px" />
     
    osalem, Sep 15, 2012 IP
  11. sandyadevi

    sandyadevi Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #11
    There are several way to put padding around image :
    In CSS:
    img {
    padding: 20px 20px 20px 20px;
    }
    or
    img
    {
    Padding: 20px
    }
    In html:
    <img src=”xx/x/x.jpg” style=”padding:20px”>
    try this it will help you.
     
    sandyadevi, Sep 21, 2012 IP
  12. arunt

    arunt Greenhorn

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #12
    For image attribute padding you can use this code <img src="desert.jpg" style="padding:4px" />
     
    arunt, Sep 21, 2012 IP
  13. alexkboorman

    alexkboorman Peon

    Messages:
    70
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #13
    Don't use inline styles to put padding on an image, write a class lmao (unless in the very completely rare and unthinkable example where you simply have one image on your entire site but no even in that case separate your styles from your markup). The people who comment on these things make me laugh, if you don't know what you're doing why are you trying to tell other people how to do it?
     
    alexkboorman, Sep 22, 2012 IP
  14. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Yes, exactly. What alex said can't be stressed enough. You do not want to use inline styles except in very rare circumstances, one which I can't think of but I suppose with enough imagination I could come up with such a scenario. You need to keep your structure (HTML) separate from your presentation (CSS). This is just good practice.

    HTML:
    
    <img class='whatever'>
    
    Code (markup):
    External CSS file:
    
    .whatever {
        padding: <top> <right> <bottom> <left>;
    }
    
    Code (markup):
    If you put in three numbers only, I *believe* it's {top, Left/Right, bottom} - I could be wrong, you can look that up to be sure. Two numbers and it's {top/bottom, left/right}. One number and of course, it's {padding on all four sides}. T-R-B-L is an order worth remembering.
     
    HBz, Sep 24, 2012 IP
    scu8a likes this.
  15. Drent123

    Drent123 Peon

    Messages:
    105
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    This used for padding with the image.
     
    Drent123, Sep 24, 2012 IP
  16. corsed

    corsed Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #16
    <img src="images/plus_process_controls.png" style="margin-left:420px;" (background:#000; <-- example)/>

    This is like moving the img to left side .

    style="margin-left: ... "
    style="margin-right: ... "
    style="float:right,left "
    u can change the background color also !
    u could try padding-bot,top,left,right those are also possible ways!
     
    Last edited: Apr 3, 2013
    corsed, Apr 3, 2013 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    Word of warning, if you are using 'attributes' to apply presentation, INCLUDING the STYLE attribute, you are likely doing things all wrong. The very question that opened this thread is "wrong" any time after 1998.
     
    deathshadow, Apr 3, 2013 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Hah, I didn't even notice this was a bounce of a 2009 thread.
     
    deathshadow, Apr 3, 2013 IP
  19. SpecialRDP

    SpecialRDP Member

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #19
    yes padding with image i tried it's working perfectly here thanks
     
    SpecialRDP, Apr 20, 2016 IP
  20. Shahidul Islam

    Shahidul Islam Active Member

    Messages:
    42
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    68
    #20
    style="padding: 5px"
    or
    img {
    padding: 5px;
    }
     
    Shahidul Islam, Aug 19, 2016 IP