Why do we use overflow:hidden;

Question

Why do we use these three properties on this menu. I am unsure why we need these three properties. I would really love to know the technical side of this ?

margin: 0;
padding: 0;
overflow: hidden;

HTML:

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

Try removing them and you will see why they are used and what is their impact on the layout. — Aziz, Apr 25 '16 at 07:29
@adrien, your accepted answer is terrible as it doesn't answer why the styles are used in the in regards to your example above - it just gives some general information about what each property would do (and some misinformation about padding and styling). I would go with Vincent Gs answer as it tells you why each of the properties are used in your example — Pete, Apr 25 '16 at 10:56

score 4 · Answer 1 · answered Apr 25 '16 at 07:56

ul element has a default margin/padding of 40px depending on the browser you are. So putting these properties to ul:

ul {
    margin: 0;
    padding: 0;
}

Overwrite the default behavior of it on browsers. See documentation here on it : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation#Finding_Consistency

Then, the overflow:hidden property is use because of the floating li elements inside the ul element. Here's an explanation from the folling documentation

Using the overflow property with a value different to visible (its default) will create a new block formatting context. This is technically necessary — if a float intersected with the scrolling element it would forcibly rewrap the content. The rewrap would happen after each scroll step, leading to a slow scrolling experience.

Source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

This is by far the best answer to the actual question! – Pete Apr 25 '16 at 10:53 — Pete, Apr 25 '16 at 10:53

Abhishek · Accepted Answer · 2016-04-25T08:25:54.763

2

The default values of padding and margin are zero(browser dependent). So i don't think there would be any difference if you remove them.

overflow : hidden is a property which will make any text going out of your div as hidden i.e. it will not be shown on screen and will be clipped.

overflow : auto will make scroll bar's appear if the text goes out of your div.

There are a lot more option's available please go through the following link for more information::

link

edited Apr 25 '16 at 08:25

answered Apr 25 '16 at 07:36

Abhishek

2,485
2
18
25

3

the default value of padding/margin of ul element are not 0 but 40px depending on the browser : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation#Finding_Consistency – Vincent G Apr 25 '16 at 07:59
I think in the above example, the overflow hidden is being used as a sort of clear fix rather than to actually hide anything. And the default values for margin and padding of `ul` is not 0 - it will always have some sort of left padding or margin in order to show the bullet, that is why the `margin:0` and` padding: 0` are used - to reset the browsers default styles. This answer really doesn't answer the question in the context it was asked – Pete Apr 25 '16 at 10:48

score 1 · Answer 3 · answered Apr 25 '16 at 08:55

1

Note that overflow: hidden is also used to clear floats in your element. At least I do that :)

i.e.

ul {
   overflow: hidden;
}

li {
   float: left;
}

https://jsfiddle.net/jff5pnx7/

answered Apr 25 '16 at 08:55

Ozrix

3,489
2
17
27

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

For the overflow:hidden part, I think the best answer is this example from w3schools: overflow hidden example What happens is that everything that can not fit in the allowed space is clipped and is not shown in any way.

The difference between margin and padding is explained here on stackoverflow in this question.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 25 '16 at 07:33

Linkan

581
1
7
18

Why do we use overflow:hidden;

4 Answers4