What's content wrapper in CSS?

user_13713065 0
Viewed 618

I've just stumbled upon this term/method of coding while learning CSS and from what I can understand the "content wrapper" is just a way to center align content of an html element within a container (specifically using a div element). I am not certain on the believability of this information, and would like someone to help further justify this please!

css html
3 Answers

I believe the term is not standardized in any way and it is mainly about semantics. In general it is being used for elements containing some information or grouping several pieces of content together.

For me it is almost the same like container, just more related to the content. So it can be for example the central part of page (between header or footer) or the column with the article.

user_87330220

To simply say, content wrapper holds all visual elements and content on the page. Yes, it centers the content inside the <div> element which is conventionally used when using a content wrapper, but it's also opinionated.

This is normally achieved by using margins, and the most common way of using a content wrapper; eg:

.wrapper {
  margin-right: auto;
  margin-left:  auto;

  max-width: 960px; 
  // Or set a padding inside of the wrapper

  padding-right: 10px; 
  padding-left:  10px;
}

Additionally, wrappers are also used for things like applying a sticky footer.

Otherwise, as for the difference between a container which may usually inherit the same properties, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components.

It serves the purpose of grouping elements both semantically and visually.

The terms wrapper and container can also mean the same thing depending on the developer and what they intend. Just remember to use them in the right way.

user_145407540

Your wrapper can take any name you wish since you decide the css selector name. The styles you apply to that selector makes the change. Either center align or left or etc. It is just a convention that developers use. You will get used to the terminology in no time. Or build your own glossary.

user_43044000
Related