Tables question for emailer_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-25 20:06 出处：网络

Another tables question. Before anyone suggests not using inline styles I\'m doing it so that all email clients will read it. Otherwise I would not normally do this. Also I\'m using tables because its

相关专题：css

Another tables question. Before anyone suggests not using inline styles I'm doing it so that all email clients will read it. Otherwise I would not normally do this. Also I'm using tables because its got to support old email clients.

With that in mind here is the example. http://jsfiddle.net/rcZZb/16/

HTML:

<body>
  <table cellspacing="0" border="0" align="left" style="background: #fff;" cellpadding="0"; width="639">
    <tr>
      <td style="line-height:0;" colspan="2"><img src="http://www.artaholic.com/html/jsfiddle/img/header.jpg" width="639" hei开发者_C百科ght="84" vspace="0" hspace="0"></td>
    </tr>
    <tr>
      <td style="line-height:0;" colspan="2"><img src="http://www.artaholic.com/html/jsfiddle/img/banner.jpg" width="639" height="156" vspace="0" hspace="0"></td>
    </tr>
      <tr>
          <td width="375" style="border:1px solid red;"><span style="padding:30px">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span>
       </td>
       <td width="264" height="158" style="border:1px solid red; background: url('http://www.artaholic.com/html/jsfiddle/img/box-bg.jpg'); font: normal 15px Arial, sans-serif; color:#0098d6;"><span style="padding:20px;">
           ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta</span>
      </td>
      </tr>
  </table>
</body>

Non-Inline CSS:

body{
    padding:0;
    margin:0
}

I'm trying to control the text in the 2 red border boxes. Right now it's centering both horizontally and vertically. I want to be able to control it with padding to specify where it should be placed inside each box. When I set my padding on the td it screws up the background-image on the right box by expanding it. If I place the text inside a span and style it with padding then only the first line moves in text.

How can I control the text placement inside the box without effecting the width of each box?

Thanks

Try to change <span> and <div>; you need that element to be diplay:block, not display:inline.

I updated your jsfiddler to use both approaches: the first one is inserted with display: block and the second one is changed to <div>.: http://jsfiddle.net/rcZZb/17/

Ah I figured using a p tag instead of the span worked out. p is not an inline tag and is supported in older email clients. Thanks to all for your answers.