标签: margin

当我在父元素中应用-3px的负边距顶部时,所有子节点向右移动(在Firefox和IE8中),但在Chrome中看起来非常精细(元素居中).

是什么导致这个？

<div class="menu-tab">
      <div class="folder-tab">
        <span class="normal-small-text">Ingresar<i class="icon-chevron-down icon-white"></i></span>
      </div>
</div>

margin-top适用于班级 .menu-tab

这是在Chrome中

和Firefox

HTML

<div>Test</div>

CSS

div {
text-align: center;
width:200px;
margin-left:20px;
}

我不想将文本放在中间，而是稍微向右/向左推。这可能吗？

有没有办法在xml中创建一个drawable,它使用图像和一些边距来抵消它？这是为了将drawable添加到无法设置边距的位置,即更改操作栏的"向上"插入符号时.

我正在尝试创建一个布局，其中堆叠的 div 占据页面的整个宽度，包括两侧的 3px 缓冲区。换句话说，我不希望它们直接进入屏幕边缘，但我仍然希望它们根据屏幕宽度调整大小。

我已经设法使用填充在 div 之间获得了这个 3px 的边距，但是我在水平间距方面遇到了问题。如何添加包含在 100% 宽度中的填充？

这是我到目前为止所拥有的：

HTML：

<div class="container">
    <div class="contentContainer first">
        <div class="content"> content 1 </div>
    </div>
    <div class="contentContainer">
        <div class="content"> content 2 </div>
    </div>
    <div class="contentContainer">
        <div class="content"> content 3 </div>
    </div>
</div>

CSS：

.container{
    border: 1px solid gray;
}

.container .contentContainer{
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    width: 100%;
}
.container .contentContainer .content {
    border: 1px solid gray;
    width: 100%;
    height: 75px;
}

.container .first {
    padding-top: 3px;
}

你可以在 …

我在 Stack Overflow 上找到了很多粘性页脚的解决方案，它对我有用。但是，我需要在“内容 div”和“页脚 div”之间保持 60px 的距离。在到目前为止我找到的所有解决方案中，如果我margin-top: 60px为我的“页脚 div”设置它不起作用。

我找到的一个解决方案：

<div id="container">
    <div id="body">
        <div id="teste">
        </div>
    </div>
    <div id="footer">
    </div>
</div>

html,
body {
  margin:0;
  padding:0;
  height:100%;
}

#container {
  min-height:100%;
  position:relative;
}

#teste {
  background: red;
  height: 500px;
}

#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */   
}

#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  background:#6cf;
  margin-top: 60px; <---- this didn't work
}

我试图在屏幕的右下角实现一个浮动按钮，但由于某种原因下边距不起作用：/我试图仅在底部更改边距大小，但没有用。

布局文件：

活动_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="de.js_labs.gaminggroups.MainActivity"
android:id="@+id/appBarMainRl">

<include
layout="@layout/some_content" // Changed by LayoutInflater in Java ...
android:layout_width="match_parent"
android:layout_height="match_parent" />

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

some_content.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:useCompatPadding="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50dp"
android:id="@+id/contentMyGroupsRl" …

我想知道为什么 Bootstrap 会为我的 ul 添加一个“边距”。

没有：

和：

<!-- HEADER -->
<div class="header">
    <div class="container">

        <ul class="list-group">
            <li class=""><a href="#start">CompanyX.com</a></li>

            <li class="right"><a href="#logout"><i class="fa fa-sign-out"></i></a></li>
            <li class="right"><a href="#money">Hey: Peter G.</a></li>
        </ul>
    </div>
</div>

CSS：https : //hastebin.com/uqawiwuyer.css

希望有人可以帮助我。

首先，抱歉我的英语不好。

我想让按钮“流行”？在我的应用程序中，当我将鼠标悬停在它们上方时。

这就是我想出的：

 <Style x:Key="SelectButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Source="\directory"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Margin">
                    <Setter.Value>
                        <Thickness Bottom="10" Right="10" Top="10" Left="10"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Source ="\directory"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Margin">
                    <Setter.Value>
                        <Thickness Bottom="0" Right="0" Top="0" Left="0"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

您可以在此处查看它的编译方式：

问题是，每当我更改按钮的边距时，它都会向下推应用程序的每个其他元素。老实说，我没有想法。

提前致谢。

我正在复习一些基本的 CSS，我偶然发现了一个教程，上面写着：

margin: 0 auto 0 auto;

相对于……

margin: 0 auto;

本身，以某事为中心。

有人可以向我解释一下，将 0 auto 放入一次而不是两次有什么区别吗？当我编码时，我没有注意到有什么不同，所以我的猜测是使用 0 auto, once 是做完全相同的事情的简写。

我有一个div包含两个label元素.每个人都label应该站在一边div.由于标签是内联元素,我已经尝试过display: block并且还有display: inline-block边距生效,但结果不是预期的结果.

  div {
    color: #ffffff;
    background-color: #3f3f3f;
  }
  label:nth-of-type(1) {
    margin-left: 5px;
  }
  label:nth-of-type(2) {
    display: block;
    <!-- display: inline-block; -->
    margin-right: 5px;
    margin-left: auto;
  }

<div>
  <label>Left side label</label>
  <label>right side label</label>
</div>

正如您在代码执行中看到的那样,第二个标签不尊重边距,而是显示在第一个标签下面.