<commit_before>---
layout: post
title: margin 负值原理
category: 学习笔记
tags: css
description: margin 负值原理
---

# margin 负值原理
## 负边距影响
* 文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因此负边距会减小元素自身供css读取的宽度或高度
* 文档流只能是后面的流向前面的，即对从左往右，从上往下的文档流来说只能向左或向上流动，不能向下或向右移动
### 水平负边距(`margin-left`,`margin-right`)
当元素没有设置width属性或者`width：auto`的时候，左右负margin会增加元素的宽度
### 垂直负边距(`margin-top`,`margin-bottom`)
`margin-top`为负值不会增加高度，只会产生向上位移
`margin-bottom`为负值不会产生位移，会减少自身的供css读取的高度<commit_msg>update margin post<commit_after>---
layout: post
title: margin 负值原理
category: 学习笔记
tags: css
description: margin 负值原理
---

# margin 负值原理
## 负边距说明
* 不脱离文档流————不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
* 文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因此负边距会减小元素自身供css读取的宽度或高度。
* 文档流只能是后面的流向前面的，即对从左往右，从上往下的文档流来说只能向左或向上流动，不能向下或向右移动。
### 水平负边距(`margin-left`,`margin-right`)
当元素没有设置width属性或者`width：auto`的时候，左右负margin会增加元素的宽度
### 垂直负边距(`margin-top`,`margin-bottom`)
`margin-top`为负值不会增加高度，只会产生向上位移
`margin-bottom`为负值不会产生位移，会减少自身的供css读取的高度
{'fraction_non_alphanumeric': 0.13205645161290322, 'fraction_numerical': 0.0, 'mean_word_length': 10.157303370786517, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6267482', 'n_tokens_mistral': 658, 'n_tokens_neox': 784, 'n_words': 48}