mozilla

Compare Revisions

margin-right

Change Revisions

Revision 307901:

Revision 307901 by teoli on

Revision 307907:

Revision 307907 by teoli on

Title:
margin-right
margin-right
Slug:
CSS/margin-right
CSS/margin-right
Tags:
"css", "CSS Reference"
"css", "CSS Reference"
Content:

Revision 307901
Revision 307907
n45    <pre class="eval">n45    <pre class="twopartsyntaxbox">
46margin-right: {{ Xref_csslength() }}| {{ Xref_csspercentage() }} 46Formal syntax: {{Xref_csslength()}} | {{Xref_csspercentage()}} | 
>| {{ Cssxref("inherit") }} | {{ Cssxref("auto") }};>auto
47</pre>
48    <pre>
49margin-right: 10px;        /* An absolute length */
50margin-right: 1em;         /* A length relative to the text size 
 >*/
51margin-right: 5%;          /* A margin relative to the nearest bl
 >ock container's width */
52margin-right: auto;
53 
54margin-right: inherit;
n56        Specifies a fixed width. See {{ xref_csslength() }} for pn64        Is a {{xref_csslength()}} specifying a fixed width: it ca
>ossible values.>n be absolute width, e.g. in <code>px</code>, or a width relative
 > to the text size, e.g. in <code>em</code>, or relative to the vi
 >ewport size, e.g. in <code>vh</code>.
n62        &nbsp;A {{ xref_csspercentage() }} always relative to then70        Is a {{xref_csspercentage()}} relative to the <em>width</
> <strong>width</strong> of the containing block.>em> of the nearest containing block.
t68        See {{ cssxref("margin") }}.t76        Is a keyword indicating that the right margin receives a 
 >share of the remaining space, defined mainly by the current layou
 >t mode.. If there several <code>auto</code> values for <code>marg
 >in-left</code> or <code>margin-right</code>, the calculated space
 > is evenly distributed between all the <code>auto</code> values. 
 >This table summarizes the different cases:<br>
77        <table class="standard-table">
78          <thead>
79            <tr>
80              <th scope="col">
81                Value of {{cssxref("display")}}
82              </th>
83              <th scope="col">
84                Value of {{cssxref("float")}}
85              </th>
86              <th scope="col">
87                Value of {{cssxref("position")}}
88              </th>
89              <th scope="col">
90                Computed value of <code>auto</code>
91              </th>
92              <th scope="col">
93                Comment
94              </th>
95            </tr>
96          </thead>
97          <tbody>
98            <tr>
99              <th>
100                <code>inline</code>, <code>inline-block</code>, <
 >code>inline-table</code>
101              </th>
102              <th>
103                <em>any</em>
104              </th>
105              <th>
106                <code>static</code> or <code>relative</code>
107              </th>
108              <td>
109                <code>0</code>
110              </td>
111              <td>
112                Inline layout mode
113              </td>
114            </tr>
115            <tr>
116              <th>
117                <code>block</code>, <code>inline</code>, <code>in
 >line-block</code>, <code>block</code>, <code>table</code>, <code>
 >inline-table</code>, <code>list-item</code>, <code>table-caption<
 >/code>
118              </th>
119              <th>
120                <em>any</em>
121              </th>
122              <th>
123                <code>static</code> or <code>relative</code>
124              </th>
125              <td>
126                <code>0</code>, except if both <code>margin-left<
 >/code> and <code>margin-right</code> are set to <code>auto</code>
 >. In this case, it is set to the value centering the element insi
 >de its parent.
127              </td>
128              <td>
129                Block layout mode
130              </td>
131            </tr>
132            <tr>
133              <th>
134                <code>block</code>, <code>inline</code>, <code>in
 >line-block</code>, <code>block</code>, <code>table</code>, <code>
 >inline-table</code>, <code>list-item</code>, <code>table-caption<
 >/code>
135              </th>
136              <th>
137                <code>left</code> or <code>right</code>
138              </th>
139              <th>
140                <code>static</code> or <code>relative</code>
141              </th>
142              <td>
143                <code>0</code>
144              </td>
145              <td>
146                Block layout mode (floating element)
147              </td>
148            </tr>
149            <tr>
150              <th>
151                <em>any</em> <code>table-*</code><em>, except</em
 >> <code>table-caption</code>
152              </th>
153              <th>
154                <em>any</em>
155              </th>
156              <th>
157                <em>any</em>
158              </th>
159              <td>
160                <code>0</code>
161              </td>
162              <td>
163                Internal <code>table-*</code> elements don't have
 > margins, use {{ cssxref("border-spacing") }} instead
164              </td>
165            </tr>
166            <tr>
167              <th>
168                <em>any, except <code>flex</code>,</em> <code>inl
 >ine-flex</code><em>, or</em> <code>table-*</code>
169              </th>
170              <th>
171                <em>any</em>
172              </th>
173              <th>
174                <em><code>fixed</code></em> or <code>absolute</co
 >de>
175              </th>
176              <td>
177                <code>0</code>, except if both <code>margin-left<
 >/code> and <code>margin-right</code> are set to <code>auto</code>
 >. In this case, it is set to the value centering the border area 
 >inside the available <code>width</code>, if fixed.
178              </td>
179              <td>
180                Absolutely positioned layout mode
181              </td>
182            </tr>
183            <tr>
184              <th>
185                <code>flex</code>, <code>inline-flex</code>
186              </th>
187              <th>
188                <em>any</em>
189              </th>
190              <th>
191                <em>any</em>
192              </th>
193              <td>
194                <code>0</code>, except if there is any positive h
 >orizontal free space. In this case, it is evenly distributed to a
 >ll horizontal <code>auto</code> margins.
195              </td>
196              <td>
197                Flexbox layout mode
198              </td>
199            </tr>
200          </tbody>
201        </table>

Back to History