CSS Padding Overrides Overflow

CSS padding overrides overflow?

In the default content-box box model on a display: block element, padding and height are added together to determine the total height of the element. overflow only affects things outside the box (outside of height + padding + border).

If you want border and padding subtracted from specified height rather than added, use box-sizing: border-box.

Why can't I override the padding from the user style agent on an input?

err... You set a wrong value

All of true syntax

/* <length> values */
padding-*: 0.5em;
padding-*: 0;
padding-*: 2cm;
/* <percentage> value */
padding-*: 10%;
/* Global values */
padding-*: inherit;
padding-*: initial;
padding-*: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

May be you need to set this right?

  padding-top: 0 !important; 
  padding-bottom: 0 !important;
  padding-left: 0 !important; 
  padding-right: 0 !important;
  margin: 0 !important;

If you need trim off line height to same size with text-size

line-height: 16px;

Warning

that will make some character cut-out

Possible to somehow override a container's padding?

You can add negative margins on the divs that should span the entire container:

div { margin-right: -10px; margin-left: -10px; }

CSS padding keeps inheriting

#menuwrapper > ul{
padding-left:37px;
}
#menuwrapper ul ul {
padding-left:40px;
}

This should solve your issue

Override CSS class to remove padding

Add the important flag to your css

.class {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

How to override padding: 0; from sass?

You can use '!important' to enforce css properties.

.social-media
{
margin-bottom: 50px;

> ul
{
  padding: 10px !important;
  list-style: none;

  > li
  {

    > a
    {
    padding-right: 20px;
    float: left;

    color: #ffffff;
     }
   }
    }
 }

@media screen and (max-width: 992px) {

               .social-media
                {

                    margin-bottom: 0;

                    height: auto;
                    width: auto;

                    > ul
                    {
                        list-style: none;

                        text-align:center;

                        > li
                        {
                            padding-left: 10px;
                            padding-right: 10px;

                            > a
                            {

                            }
                        }
                    }

 }

---

Related Topics