Eric A. Meyer [Eric A. Meyer] - Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details
Here you can read online Eric A. Meyer [Eric A. Meyer] - Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2015, publisher: O’Reilly Media, genre: Home and family. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:
Romance novel
Science fiction
Adventure
Detective
Science
History
Home and family
Prose
Art
Politics
Computer
Non-fiction
Religion
Business
Children
Humor
Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.
![Eric A. Meyer [Eric A. Meyer] Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details](https://litark.com/uploads/posts/book/119142/eric-a-meyer-eric-a-meyer-padding-borders.jpg)
- Book:Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details
- Author:
- Publisher:O’Reilly Media
- Genre:
- Year:2015
- Rating:3 / 5
- Favourites:Add to favourites
- Your mark:
Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details: summary, description and annotation
We offer to read an annotation, description, summary or preface (depends on what the author of the book "Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.
The ability to apply margins, borders, and padding to any web page element is one of the things that sets CSS so far above traditional markup. With this practical guide, you will not only learn how to use these properties to lay out your document, but also how to change and control the appearance of any element on the page.
Short and sweet, this short book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Padding, Borders, Outlines, and Margins in CSS, youll receive a discount on the entire Definitive Guide once its released. Why wait? Learn how to bring life to your web pages now.
- Understand the CSS box model, including the way different properties relate to one another
- Use tricks for defining padding values, including inline element padding
- Explore border width, style, and color, plus the use of border images
- Learn how to use outlines: presentational elements that wont affect layout
- Dive into the use of margins, including the way top and bottom margins collapse
**
About the AuthorEric A. Meyer is the author of the critically acclaimed online tutorial Introduction to HTML, as well as some other semi-popular Web pages. He is a member of the CSS&FP Working Group and the author of Cascading Style Sheets: The Definitive Guide.
Eric A. Meyer [Eric A. Meyer]: author's other books
Who wrote Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details? Find out the surname, the name of the author of the book and a list of all author's works by series.
Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details — read online for free the complete book (whole text) full work
Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.
Font size:
Interval:
Bookmark:
Way back in the 1990s, pretty much all web pages were designed using tables for layout. There were a lot of reasons for this, but one of the most common was the desire to put a box around a bit of text, like a callout. Of course, this was a ridiculously complicated way to put a border around a paragraph or sidebar. Shouldnt it be easier than that?
The authors of CSS felt it should, indeed, be easier, so they devoted agreat deal of attention to allowing you to define borders forparagraphs, headings, divs, anchors, imagesdarned near everything a webpage can contain. These borders can set an element apart from others,accentuate its appearance, mark certain kinds of data as having beenchanged, or any number of other things.
CSS also lets you define regions around an element that control how theborder is placed in relation to the content and how close other elementscan get to that border. Between the content of an element and itsborder, we find the padding of an element, and beyond the border,there are outlines and then the margins. These properties affect howthe entire document is laid out, of course, but more importantly, theyvery deeply affect the appearance of a given element.
As youre likely aware, all document elements generate a rectangular boxcalled the element box, which describes the amount of space that anelement occupies in the layout of the document. Therefore, each boxinfluences the position and size of other element boxes. For example, ifthe first element box in the document is an inch tall, then the next boxwill begin at least an inch below the top of the document. If the firstelement box is changed and made to be two inches tall, every followingelement box will shift downward an inch, and the second element box willbegin at least two inches below the top of the document.
By default, a visually rendered document is composed of a number ofrectangular boxes that are distributed so that they dont overlap. Also, within certain constraints, these boxes take up as littlespace as possible while still maintaining a sufficient separation tomake clear which content belongs to which element.
Boxes can overlap if they have been manually positioned, and visualoverlap can occur if negative margins are used on normal-flow elements.
In order to fully understand how margins, padding, and borders arehandled, you must clearly understand the box model, illustrated in.
Its fairly common to explicitly define the width of an element, andmuch less common to explicity define the height. By default, the widthof an element is defined to be the distance from the left inner edge tothe right inner edge, and the height is the distance from the inner topto the inner bottom. The properties that affect these distances are, unsurprisingly, called height and width.
One important note about these two properties: they dont apply toinline nonreplaced elements. For example, if you try to declare aheight and width for a hyperlink thats in the normal flow andgenerates an inline box, CSS-conformant browsers must ignore thosedeclarations. Assume that the following rule applies:
a:link{color:red;background:silver;height:15px;width:60px;}Youll end up with red unvisited links on silver backgrounds whoseheight and width are determined by the content of the links. They willnot have content areas that are 15 pixels tall by 60 pixels wide. If,on the other hand, you add a display value, such as inline-block orblock, then height and widthwill set the height and width ofthe links content areas.
Values: | | | |
Initial value: |
|
Applies to: | All elements except nonreplaced inline elements, table rows, and row groups |
Inherited: | No |
Percentages: | Refer to the width of the containing block |
Computed value: | For |
Values: | | |
Initial value: |
|
Applies to: | All elements except nonreplaced inline elements, table rows, and row groups |
Inherited: | No |
Percentages: | Calculated with respect to the height of the containing block |
Computed value: | For |
Its possible to change the meaning of height and width usingthe property box-sizing. This is not covered in this text, but inshort, you can use either the content box or the border box as the areaof measure. For the purposes of this text, well assume that the defaultsituation holds: that height and width refer to the height and widthof the content area (box-sizing: content-box).
In the course of this text, well keep the discussion simple by assumingthat the height of an element is always calculated automatically. If anelement is eight lines long, and each line is an eighth of an inch tall,then the height of the element is one inch. If its 10 lines tall, thenthe height is 1.25 inches. In either case, the height is determined bythe content of the element, not by the author. Its rarely the case thatelements in the normal flow have a set height.
Just beyond the content area of an element, we find its padding,nestled between the content and any borders. The simplest way to setpadding is by using the property padding.
Values: | [ | ]{1,4} | |
Initial value: | Not defined for shorthand elements |
Applies to: | All elements |
Inherited: | No |
Percentages: | Refer to the width of the containing block |
Computed value: | See individual properties ( |
Note: |
|
Font size:
Interval:
Bookmark:
Similar books «Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details»
Look at similar books to Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.
Discussion, reviews of the book Padding, Borders, Outlines, and Margins in CSS: CSS Box Model Details and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.