Newcomer asking for advice on style issues, blank strips between pictures_html/css

This is the target effect.

I stole the style files, stole the pictures, and tested the exact same source code. The results are as follows, I burst into tears.

The page source code of the prompt box is as follows:

<table class="MessageBox" align="center" width="500">   <tr class="head">      <td class="left"></td>      <td class="center">         <div class="title">提示</div>      </td>      <td class="right"></td>   </tr>   <tr class="msg">      <td class="left"></td>      <td class="center info">         <div class="msg-content">请选择用户，只能查询您管理范围内的，角色序号在您之后的用户</div>      </td>      <td class="right"></td>   </tr>   <tr class="foot">      <td class="left"></td>      <td class="center"></td>      <td class="right"></td>   </tr></table>

Copy after login

The related styles are as follows:

/* 提示框样式 */.MessageBox{}/* 表头 */.MessageBox .head{   height:32px;   overflow:hidden;}.MessageBox .head .left{   width:20px;   background:url('images/message_bg.png') left 0px no-repeat;}.MessageBox .head .center{   padding:0px;   background:url('images/message_bg.png') 0px -32px repeat-x;}.MessageBox .head .center .title{   float:left;   color:#fff;   font-size:16px;   font-weight:bold;   margin-top:5px;}.MessageBox .head .right{   width:20px;   background:url('images/message_bg.png') right 0px no-repeat;}/* 表头 */.MessageBox .head-no-title{   height:16px;}.MessageBox .head-no-title .left{   width:20px;   background:url('images/message_bg.png') left -96px no-repeat;}.MessageBox .head-no-title .center{   background:url('images/message_bg.png') 0px -112px repeat-x;}.MessageBox .head-no-title .right{   width:20px;   background:url('images/message_bg.png') right -96px no-repeat;}/* 按钮栏 */.MessageBox .control{   height:40px;   vertical-align:top;}.MessageBox .control .left{   width:20px;   background:url('images/message_center_bg.png') left top repeat-y;}.MessageBox .control .center{   background-color:#7bafe6;   text-align:center;}.MessageBox .control .right{   width:20px;   background:url('images/message_center_bg.png') right top repeat-y;}/* 表底 */.MessageBox .foot{   height:16px;}.MessageBox .foot .left{   width:20px;   background:url('images/message_bg.png') left -64px no-repeat;}.MessageBox .foot .center{   background:url('images/message_bg.png') 0px -80px repeat-x;}.MessageBox .foot .right{   width:20px;   background:url('images/message_bg.png') right -64px no-repeat;}/* 提示框 */.MessageBox .msg{   height:90px;}.MessageBox .msg .left{   width:20px;   background:url('images/message_center_bg.png') left top repeat-y;}.MessageBox .msg .center{   padding-left:90px;   font-size:16px;   background-color:#7bafe6;}.MessageBox .msg .center .msg-content{   color:#fff;   margin:20px 12px 20px 6px;}.MessageBox .msg .right{   width:20px;   background:url('images/message_center_bg.png') right top repeat-y;}.MessageBox .msg .error{   background-image:url("images/icon64_error.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .info{   background-image:url("images/icon64_info.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .warning{   background-image:url("images/icon64_warning.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .forbidden{   background-image:url("images/icon64_forbidden.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .stop{   background-image:url("images/icon64_stop.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .blank{   height:40px;   padding:10px 20px 10px 20px;   text-align:center;}

Copy after login

The images needed are as follows:

This is message_bg.png

This is message_center_bg.png

Please help me. I will have a meeting to demonstrate tomorrow. I am a .NET developer and I am really a layman on styles. .
It seems that this is related to the HTML standard. Now the master page in the project is unified:

Thank you everyone ~

Reply to the discussion (solution)

You can debug and see which background-position is deviated, followed by the xy coordinates, change it and remove the white bars
If it is for demonstration, just use a picture. , why are there so many splicings? Do you want to display many types of methods?

Set the cellspaceing cellpadding of the table to 0
Maybe you spelled it wrong

Change the border, margin, and spacing of the table are all set to 0, that is:

  .MessageBox{ border-collapse:collapse;}

Copy after login

Related labels：

新人请教样式问题图片之间的空白条条

source：php.cn

Previous article：Looking for a static page with detailed pictures_html/css_WEB-ITnose Next article：How to use JS or css to remove the color of a tag when clicked, during click, and after click_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Newcomer asking for advice on style issues, blank strips between pictures_html/css_WEB-ITnose

Reply to the discussion (solution)