Home>Article>Web Front-end> A brief discussion on the use of negative margin in css layout

A brief discussion on the use of negative margin in css layout

青灯夜游 forward: 2021-02-18 22:48:07 2047browse

[Recommended tutorial:CSS video tutorial]

1. The width of the left and right columns is fixed, and the width of the middle column is adaptive

    左右栏宽度固定，中间栏宽度自适应  
   main
 
 left
 right

A brief discussion on the use of negative margin in css layout

The effect of reducing the window:

A brief discussion on the use of negative margin in css layout

2. Remove the right border of the list

    除去列表右边框  
    除去列表右边框
 除去列表右边框
 除去列表右边框
 除去列表右边框
 除去列表右边框
 除去列表右边框
 除去列表右边框
 除去列表右边框

Effect:

A brief discussion on the use of negative margin in css layout

3. Remove the bottom border (border-bottom) of the last li in the list

Container There is a border, and the list in the container also has a bottom border (border-bottom), causing the border-bottom of the last li to overlap with the outer border of the container. This situation is usually encountered in classified lists;

As shown in the figure:

A brief discussion on the use of negative margin in css layout

Example:

    除去列表最后一个li的底边框  
   女装 /内衣
 男装 /运动户外
 女鞋 /男鞋 /箱包
 化妆品 /个人护理
  腕表 /珠宝饰品 /眼镜
 零食 /进口食品 /茶酒
 生鲜水果
 大家电 /生活电器

Effect:

A brief discussion on the use of negative margin in css layout

Note: When the container border color and the container When the colors of the list borders are different, add overflow: hidden on the container element; to hide the overflow part;

For more programming-related knowledge, please visit:Programming Video! !

The above is the detailed content of A brief discussion on the use of negative margin in css layout. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to add small icons using css Next article：How to add small icons using css

See more

A brief discussion on the use of negative margin in css layout

Related articles