Coding for Beginners: Recap #35—Overflow, Padding and Margin скачать в хорошем качестве

Coding for Beginners: Recap #35—Overflow, Padding and Margin

Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w... The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here:    / @designerslearncode   ------ Yesterday, we introduced the idea that you can limit the maximum width and height of an element. What happens when the content is actually larger than the maximum width and height that we have set? In this case, we use the overflow property to control what happens. The value for overflow can either be "hidden" or "scroll." With hidden, any content that overflows will be hidden. With scroll, a scrollbar is added so that the user can scroll to see the missing content. Let's look at an example: Here we have a sample demo code page where we have coded in the HTML a section that contains an h3 heading element and paragraph text (filled with placeholder "Lorem Ipsum" text). The ellipsis indicates there is much more text than is shown. The CSS shows the two options. In the first option, the overflow property is set to "hidden" while in the second option, the overflow property is set to "scroll." With "hidden," we see that the text gets cut off as soon as the maximum height of 400 pixels is reached. With "scroll," a scrollbar appears and you can scroll through the text to see all of the text available. We have already touched upon padding and margin. But we will discuss it more in depth in this video. Padding specifies the space between the content of an element and its border. While margin specifies the gap between the border and the border of another element. Increasing margin widens the gap between elements. The value can be in pixels or percentages. The values are written out in a format where you specify the top margin or padding first and then work clockwise. So top, right, bottom, and left. For our examples we have added borders around our elements so it is easier to see the margin and padding being changed. p { margin: 10px 5px 10px 5px; padding: 10px 5px 10px 5px; } Now you can see that there is space between the border and the content and the border and the adjacent element. If the top and the bottom margin or padding are the same and the left and the right margin or padding are the same, you can shorten the declaration so the first is the top & bottom and the second is the right & left. p { padding: 10px 5px; margin: 10px 5px;} Even though the code has changed, there is no change visually because the browser still shows 10 pixels of margin and padding at the top and bottom and 5 pixels of margin and padding to the left and right. This shows the code we have reviewed again. We have HTML at the top and the two options of CSS that we reviewed below. Neither padding nor margin is inherited by child elements. If you specify a width or height for a box, then the borders, margin, and padding are added to its width and height. We use the margin to center an element as well. By setting the left-margin and the right-margin to "auto", a box can be centered on the page or within its containing element. One must specify the width of the box and the auto value will make the browser put an equal gap on each side of the box. p { width: 800px; padding: 50px; margin: 10px auto; } In our final code example, we see that we have limited the width of the box to 800 pixels. The browser will automatically calculate the space needed on each side to center the content. #HTML #CSS #coding #web #accessibility #overflow #margin #padding #designtocode #codingbootcamp #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse