右填充覆盖边距答案

【问题标题】：right padding overwrites the margin右填充覆盖边距
【发布时间】：2014-09-12 12:43:23
【问题描述】：

看这个现场演示：http://jsfiddle.net/5AUMA/25/

如何使左侧边栏文本右对齐但距右边距约 1%。

当我执行padding-right: 1%; 时，它开始覆盖边距

另外，我如何使圆圈位于文本上方？

EDIT - 刚刚编辑了链接

【问题讨论】：

文字上方？它已经在上面了。您是指圆圈内的文字吗？
@Fabio 再次看到链接..它到圈子的列表..我需要它在底部

标签： html css margin padding

【解决方案1】：

您可以在 .left 类上使用：

direction:rtl;
text-indent: 1%;

另一种选择是：

在.left 内创建一个div 并将其命名为.inner-left，然后将此CSS 添加到您的代码中：

// HTML
<div class="left">
    <div class="inner-left">
        LEFT
    </div>
</div>

// CSS
.inner-left {
    text-align: right;
    width: 95%; /* change this value if you need */
}

ps：不要忘记运行 jsfiddle 来测试更改

希望对你有帮助。

【讨论】：

direction: rtl 是做什么的？另外，如何确保我的文本显示在左侧边栏中的圆形图像下方
@sukhvir 我看不到您所说的圆形图像，也许您忘记更新 jsfiddle。我已经更新了我的答案，看看是否有帮助。

【解决方案2】：

我认为最好的办法是使用盒子模型来设置边距/填充，并使用文本对齐属性和边距自动以及设置对象的显示方式（块、内联等）。我玩了一点你给出的小提琴示例，并使用盒子模型在父级中正确设置元素。抱歉，我使用了内联 CSS，但这只是一个示例，您可以提取并传输到主 CSS 文件。

这是新的小提琴测试：http://jsfiddle.net/5AUMA/26/

盒子模型参考在这里：http://www.w3schools.com/css/css_boxmodel.asp

代码示例以防万一（但小提琴已经全部完成）：

<div class="left">
<div style="padding-right:5%; display:block; text-align:right;" >
    <img style="margin:auto; margin-right:0; max-width:50%; max-height:50%; display:block;"  src="http://img.photobucket.com/albums/v436/passion4architecture/LOGO_ROUND%20and%20CIRCLE/Logo_The-Circle-of-Reason_wwwcircleofreasonorg_dian-hasan-branding_US-2_zpsf675b4a5.png" />
    hello
    </div>

LEFT

这应该有助于满足您当前的所有需求。

Ps：对于任何元素（包括图像），最好使用 css 来调整宽度/高度和对齐方式。

干杯:)

【讨论】：

干杯...我如何将其放入 css 中。您是否可以在 css 中完成上述所有操作 .. 包括图像大小？
简单，只需删除内联 CSS 并将类分配给元素。并在您的 CSS 文件中使用内联 CSS 的属性/规则编写这些类，因此它将是这样的： .left-top-box { rules_here } （分配给保存图像的 div）和 .left-top-box -image {rules_here}（分配图像本身）。快乐编码；）