设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 一个span为何不能设置MARGIN-RIGHT
返回列表 发新帖
查看: 3299|回复: 5

[已解决]一个span为何不能设置MARGIN-RIGHT

[复制链接]
sxfxtf
发表于 2019-5-27 21:57:20 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 sxfxtf 于 2019-5-27 22:00 编辑

没办法传附件，代码附上
问题就是84行写的   
我就是要把下面的文字通过margin-right设置边距
<p>坦格利安家族的"风暴降生"</p>
<p>铁王座</p>
<p>安达尔人和先民的</p>
<p>七大王国守护者</p>
<p>大草海上的</p>
<p>不焚者镣铐</p>
                                       
但是span标签,设置了display和宽高以后,但是css中的margin-right为何会在父元素标签范围以外,从而导致视觉上margin-rigth失效的感觉??????

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         *{
  8.                                 margin: 0px;
  9.                                 padding: 0px;
  10.                         }
  11.                         .page-left{
  12.                                 min-height: 1000px;
  13.                                 width: 70%;
  14.                                 height: 100%;
  15.                                 background-color: #22c3aa;
  16.                                 float: left;
  17.                                 transition: background-color 1s;
  18.                         }
  19.                         .left-dis{
  20.                                 text-align: right;
  21.                                 margin-right:10px;
  22.                                 margin-bottom: 20px;
  23.                                 color: white;
  24.                                 font-size: 50px;
  25.                                 font-weight: 500px;
  26.                                 transition: color 1s;
  27.                         }
  28.                         .left-title{
  29.                                 margin-right: 20px;
  30.                                 height: 200px;
  31.                                 width: 1332px;
  32.                                 font-size: 20px;
  33.                                 display:block
  34.                         }
  35.                         .ul-left{
  36.                                 list-style: none;
  37.                                 height: 100%;
  38.                                 width: 70%;
  39.                         }       
  40.                         .page-right{
  41.                                 min-height: 1000px;
  42.                                 width: 30%;
  43.                                 height: 100%;
  44.                                 background-color: white;
  45.                                 transition: background-color 1s;
  46.                                 float: left;
  47.                         }
  48.                         .right-dis {
  49.                                 font-size: 50px;
  50.                                 margin-bottom: 20px;
  51.                                 font-weight: 500px;
  52.                                 margin-left:5px;
  53.                                 color: #22c3aa;
  54.                                 transition: color 1s;
  55.                         }
  56.                         .right-title{
  57.                                 display: inline-block;
  58.                                 font-size: 20px;
  59.                         }
  60.                         .ul-right{
  61.                                 list-style: none;
  62.                                 height: 100%;
  63.                                 width: 30%;
  64.                         }
  65.                         .page-left:hover{
  66.                                 background-color: white;
  67.                         }
  68.                         .page-left:hover .left-dis{
  69.                                 color: #22c3aa;
  70.                         }
  71.                         .page-left:hover+.page-right{
  72.                                 background-color:#22c3aa
  73.                         }
  74.                         .page-left:hover+.page-right>.right-dis{
  75.                                 color: white
  76.                         }
  77.                        
  78.                 </style>
  79.         </head>
  80.         <body>
  81.                 <div class="page-left">
  82.                         <p class="left-dis">小树苗的</p>
  83.                         <span class="left-dis left-title">
  84.                         <!就是这里的span,设置了display和宽高,但是css中的margin-right为何会在父元素标签范围以外-->
  85.                                 <p>坦格利安家族的"风暴降生"</p>
  86.                                 <p>铁王座</p>
  87.                                 <p>安达尔人和先民的</p>
  88.                                 <p>七大王国守护者</p>
  89.                                 <p>大草海上的</p>
  90.                                 <p>不焚者镣铐</p>
  91.                         </span>
  92.                         <ul class="ul-left">
  93.                                 <li>左</li>
  94.                                 <li>左</li>
  95.                                 <li>左</li>
  96.                                 <li>左</li>
  97.                         </ul>
  98.                 </div>
  99.                 <div class="page-right">
  100.                         <p class="right-dis">成长相册</p>
  101.                         <span class="right-dis right-title">
  102.                                 <p>Daenerys</p>
  103.                                 <p>Lawful hei</p>
  104.                                 <p>Queen</p>
  105.                                 <p>Mother of Dragen</p>
  106.                                 <p>Khaleesi</p>
  107.                                 <p>Breaker</p>
  108.                         </span>
  109.                         <ul class="ul-right">
  110.                                 <li>右边</li>
  111.                                 <li>右边</li>
  112.                                 <li>右边</li>
  113.                                 <li>右边</li>
  114.                                 <li>右边</li>
  115.                         </ul>
  116.                 </div>
  117.         </body>
  118. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
sukiwhip
2019-5-28 18:32:27
本帖最后由 sukiwhip 于 2019-5-28 18:35 编辑
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0px;
  10.             padding: 0px;
  11.         }
  12.         
  13.         .page-left {
  14.             min-height: 1000px;
  15.             width: 60%;
  16.             height: 100%;
  17.             background-color: #22c3aa;
  18.             float: left;
  19.             transition: background-color 1s;
  20.         }
  21.         
  22.         .left-dis {
  23.             text-align: right;
  24.             margin-right: 10px;
  25.             margin-bottom: 20px;
  26.             color: white;
  27.             font-size: 50px;
  28.             font-weight: 500px;
  29.             transition: color 1s;
  30.         }
  31.         
  32.         .left-title {
  33.             margin-right: 20px;
  34.             height: 200px;
  35.             width: auto;
  36.             font-size: 20px;
  37.             display: block
  38.         }
  39.         
  40.         .ul-left {
  41.             list-style: none;
  42.             height: 100%;
  43.             width: 70%;
  44.         }
  45.         
  46.         .page-right {
  47.             min-height: 1000px;
  48.             width: 30%;
  49.             height: 100%;
  50.             background-color: white;
  51.             transition: background-color 1s;
  52.             float: left;
  53.         }
  54.         
  55.         .right-dis {
  56.             font-size: 50px;
  57.             margin-bottom: 20px;
  58.             font-weight: 500px;
  59.             margin-left: 5px;
  60.             color: #22c3aa;
  61.             transition: color 1s;
  62.         }
  63.         
  64.         .right-title {
  65.             display: inline-block;
  66.             font-size: 20px;
  67.         }
  68.         
  69.         .ul-right {
  70.             list-style: none;
  71.             height: 100%;
  72.             width: 30%;
  73.         }
  74.         
  75.         .page-left:hover {
  76.             background-color: white;
  77.         }
  78.         
  79.         .page-left:hover .left-dis {
  80.             color: #22c3aa;
  81.         }
  82.         
  83.         .page-left:hover+.page-right {
  84.             background-color: #22c3aa
  85.         }
  86.         
  87.         .page-left:hover+.page-right>.right-dis {
  88.             color: white
  89.         }
  90.     </style>
  91. </head>

  93. <body>
  94.     <div class="page-left">
  95.         <p class="left-dis">小树苗的</p>
  96.         <span class="left-dis left-title">
  97.                         <!--就是这里的span,设置了display和宽高,但是css中的margin-right为何会在父元素标签范围以外-->
  98.                                 <p>坦格利安家族的"风暴降生"</p>
  99.                                 <p>铁王座</p>
  100.                                 <p>安达尔人和先民的</p>
  101.                                 <p>七大王国守护者</p>
  102.                                 <p>大草海上的</p>
  103.                                 <p>不焚者镣铐</p>
  104.                         </span>
  105.         <ul class="ul-left">
  106.             <li>左</li>
  107.             <li>左</li>
  108.             <li>左</li>
  109.             <li>左</li>
  110.         </ul>
  111.     </div>
  112.     <div class="page-right">
  113.         <p class="right-dis">成长相册</p>
  114.         <span class="right-dis right-title">
  115.                                 <p>Daenerys</p>
  116.                                 <p>Lawful hei</p>
  117.                                 <p>Queen</p>
  118.                                 <p>Mother of Dragen</p>
  119.                                 <p>Khaleesi</p>
  120.                                 <p>Breaker</p>
  121.                         </span>
  122.         <ul class="ul-right">
  123.             <li>右边</li>
  124.             <li>右边</li>
  125.             <li>右边</li>
  126.             <li>右边</li>
  127.             <li>右边</li>
  128.         </ul>
  129.     </div>
  130. </body>

  132. </html>
复制代码

是想要这个效果？
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2019-5-27 22:56:47 | 显示全部楼层
1、页面看着效果挺好的，鱼油准确描述下问题：
Snip20190527_1.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sxfxtf
 楼主| 发表于 2019-5-28 09:49:41 | 显示全部楼层
不二如是 发表于 2019-5-27 22:56
1、页面看着效果挺好的，鱼油准确描述下问题：


不二学长.你好
在小树苗的下面有一段p标签,他们的父标签是span.
span是行内元素,所以我设置了display属性和宽高.想设置右边距(margin-right).
把版面白色和青色的那条分界线和p标签产生距离.
但是似乎无效.不知道什么原因
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2019-5-28 18:32:27 | 显示全部楼层    本楼为最佳答案   
本帖最后由 sukiwhip 于 2019-5-28 18:35 编辑
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0px;
  10.             padding: 0px;
  11.         }
  12.         
  13.         .page-left {
  14.             min-height: 1000px;
  15.             width: 60%;
  16.             height: 100%;
  17.             background-color: #22c3aa;
  18.             float: left;
  19.             transition: background-color 1s;
  20.         }
  21.         
  22.         .left-dis {
  23.             text-align: right;
  24.             margin-right: 10px;
  25.             margin-bottom: 20px;
  26.             color: white;
  27.             font-size: 50px;
  28.             font-weight: 500px;
  29.             transition: color 1s;
  30.         }
  31.         
  32.         .left-title {
  33.             margin-right: 20px;
  34.             height: 200px;
  35.             width: auto;
  36.             font-size: 20px;
  37.             display: block
  38.         }
  39.         
  40.         .ul-left {
  41.             list-style: none;
  42.             height: 100%;
  43.             width: 70%;
  44.         }
  45.         
  46.         .page-right {
  47.             min-height: 1000px;
  48.             width: 30%;
  49.             height: 100%;
  50.             background-color: white;
  51.             transition: background-color 1s;
  52.             float: left;
  53.         }
  54.         
  55.         .right-dis {
  56.             font-size: 50px;
  57.             margin-bottom: 20px;
  58.             font-weight: 500px;
  59.             margin-left: 5px;
  60.             color: #22c3aa;
  61.             transition: color 1s;
  62.         }
  63.         
  64.         .right-title {
  65.             display: inline-block;
  66.             font-size: 20px;
  67.         }
  68.         
  69.         .ul-right {
  70.             list-style: none;
  71.             height: 100%;
  72.             width: 30%;
  73.         }
  74.         
  75.         .page-left:hover {
  76.             background-color: white;
  77.         }
  78.         
  79.         .page-left:hover .left-dis {
  80.             color: #22c3aa;
  81.         }
  82.         
  83.         .page-left:hover+.page-right {
  84.             background-color: #22c3aa
  85.         }
  86.         
  87.         .page-left:hover+.page-right>.right-dis {
  88.             color: white
  89.         }
  90.     </style>
  91. </head>

  93. <body>
  94.     <div class="page-left">
  95.         <p class="left-dis">小树苗的</p>
  96.         <span class="left-dis left-title">
  97.                         <!--就是这里的span,设置了display和宽高,但是css中的margin-right为何会在父元素标签范围以外-->
  98.                                 <p>坦格利安家族的"风暴降生"</p>
  99.                                 <p>铁王座</p>
  100.                                 <p>安达尔人和先民的</p>
  101.                                 <p>七大王国守护者</p>
  102.                                 <p>大草海上的</p>
  103.                                 <p>不焚者镣铐</p>
  104.                         </span>
  105.         <ul class="ul-left">
  106.             <li>左</li>
  107.             <li>左</li>
  108.             <li>左</li>
  109.             <li>左</li>
  110.         </ul>
  111.     </div>
  112.     <div class="page-right">
  113.         <p class="right-dis">成长相册</p>
  114.         <span class="right-dis right-title">
  115.                                 <p>Daenerys</p>
  116.                                 <p>Lawful hei</p>
  117.                                 <p>Queen</p>
  118.                                 <p>Mother of Dragen</p>
  119.                                 <p>Khaleesi</p>
  120.                                 <p>Breaker</p>
  121.                         </span>
  122.         <ul class="ul-right">
  123.             <li>右边</li>
  124.             <li>右边</li>
  125.             <li>右边</li>
  126.             <li>右边</li>
  127.             <li>右边</li>
  128.         </ul>
  129.     </div>
  130. </body>

  132. </html>
复制代码

是想要这个效果？
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sxfxtf
 楼主| 发表于 2019-5-28 21:05:10 | 显示全部楼层
sukiwhip 发表于 2019-5-28 18:32
是想要这个效果？

是的,多谢多谢,我看到哪里的问题了.我竟然忘记了auto这个值,蠢哭了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2019-5-29 10:33:46 | 显示全部楼层
sxfxtf 发表于 2019-5-28 21:05
是的,多谢多谢,我看到哪里的问题了.我竟然忘记了auto这个值,蠢哭了

另外，如果你的浏览器宽度小于一定的范围，你的第一行会换行，导致左右不对称，当然，很少人会这样缩小浏览器。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-8 07:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表