Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
9th Edition
ISBN: 9780134801346
Author: FELKE-MORRIS
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Expert Solution & Answer
Chapter 6, Problem 1MC
Program Description Answer
The components of the box model from outermost to innermost are margin, border, padding and content.
Hence, the correct option is “A”.
Expert Solution & Answer
Explanation of Solution
Explanation:
Box model:
Each HTML elements is considered as “boxes”. In Cascading Style Sheet, the word box model is used while discussing about design and layout.
It is basically a box, which wraps every element in a document; the components of the box model from outermost to innermost are:
- Margin
- Border
- Padding
- Content
Margin:
Margin is one of the components of box model. It defines an empty space between an element and any adjacent elements.
It is always transparent; hence the page background color or parent element shows in this area.
Border:
The border is an area between the content and the margin areas. The value of the default border is “0” that does not displayed on the page.
- Using “border property”, user can configure an element’s border.
Content:
It is an area, contains a combination of both text and HTML elements such as headings, images, list and so on.
It does not contain any other components like margin, border and padding.
Padding:
The padding is an area between the content and the border areas. The default value of padding is “0”.
Using “padding property”, user can configure an element’s padding.
Explanation for incorrect options:
b)
The given listed components are from innermost to outermost of the box model.
Hence, the option “B” is wrong.
c)
The given listed components are not from the outermost to innermost of the box model. The correct components are margin, border, padding and content.
Hence, the option “C” is wrong.
d)
The given listed components are not from the outermost to innermost of the box model. The correct components are margin, border, padding and content.
Hence, the option “D” is wrong.
Want to see more full solutions like this?
Subscribe now to access step-by-step solutions to millions of textbook problems written by subject matter experts!
Students have asked these similar questions
For the purposes of laying out content, the total height of a box is calculated by adding which of the following?
content height and the top and bottom margins, borders, and padding
content height, margin height, and page element height
content length of the box, webpage height, and top margin
content height, top margin, and bottom margin
Which of the following statement will create a figure whose dimensions measure 10 inches x 5 inches? The commas separate one line from another. *
a) Import matplotlib. pyplot as plt, plt.figure(figure = (10,5))
b) Import pyplot as plt, plt.figure(figure = (10,5))
c) Import matplotlib. pyplot as plt, plt.figure(size =(10,5))
d) Import matplotlib.pyplot as plt, plt.figure(fig = (10,5))
THIS IS NOT A GRADED QUESTION, IT IS A REVIEW
the input for question 1 (01.html)
<!DOCTYPE html><html><head><title>EXAM5 Makeup</title><style type='text/css'>form{color:navy;}table{border:5px solid navy;background-color:yellow;}th{color:yellow;background-color:navy;border:solid navy 2px;outline:solid navy 2px;border-}input[type='text']{background-color:#DEDEE6;border:4px solid navy;}input[type='button'],input[type='reset']{color:white;background-color:black;border:1px solid white;}label{color:navy;font-weight: bold;}</style></head><body><form><table><tr><th colspan="2">DOUBLE/TRIPPLE/QUADRUPLE SUM PROBLEM</th></tr><tr> <td><label>Enter Number1:</label></td><td> <input type="text" /> </td> </tr><tr> <td><label>Enter Number2:</label></td><td> <input type="text" /> </td> </tr><tr>…
Chapter 6 Solutions
Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
Ch. 6.4 - Prob. 1CPCh. 6.4 - Prob. 2CPCh. 6.4 - Prob. 3CPCh. 6.15 - Prob. 1CPCh. 6.15 - Prob. 2CPCh. 6.15 - Prob. 3CPCh. 6 - Prob. 1MCCh. 6 - Prob. 2MCCh. 6 - Prob. 3MCCh. 6 - Which of the following configures a class called...
Ch. 6 - Prob. 5MCCh. 6 - Prob. 6MCCh. 6 - Prob. 7MCCh. 6 - Prob. 8MCCh. 6 - Prob. 9MCCh. 6 - Prob. 11FIBCh. 6 - Prob. 12FIBCh. 6 - The ____________ is always transparent.Ch. 6 - Prob. 14FIBCh. 6 - Prob. 15FIBCh. 6 - Prob. 1AYKCh. 6 - Prob. 2AYKCh. 6 - Prob. 3AYKCh. 6 - Prob. 1HOECh. 6 - Prob. 2HOECh. 6 - Prob. 3HOECh. 6 - Prob. 4HOECh. 6 - Prob. 5HOECh. 6 - Prob. 6HOECh. 6 - Prob. 7HOECh. 6 - Prob. 8HOECh. 6 - Prob. 9HOECh. 6 - Prob. 10HOE
Knowledge Booster
Similar questions
- Which of the following commands could not be used to display a black and white image? Group of answer choices 1. imagesc 2. plot 3. image 4. imshowarrow_forwardWhich code snipped should be used to display an inline style? 1) <styple>p { Margin- bottom: 0; } </style> 2) <link ref “stylesheet” style=”test/css” href = “style.css”> 3) <p style “padding-top: 1 rem”>paragraph 1</p> 4) <script>document.getElementsByTagName (“p”) (0). Style. Color =”blue”; </script>arrow_forward7- Which of the following shows correct way to set a text responsive? a. p {font-size: 100%;} b. p {font-size:20 px; responsive;} c. p {font-size: 20 vw;} d. p {font-size: auto;}arrow_forward
- Add reset button to the form, Onclick of reset it will clear the form and alert the user. <!DOCTYPE html><html><head><!--Get Elements Sample--><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Hands-on Project 1-4</title><link rel="stylesheet" href="styles.css" /><script src="modernizr.custom.05819.js"></script></head> <body><header><h1>Lecture Sample Work 2</h1></header> <article><h2>Shipping Address</h2><form><fieldset id="addroptions"><legend><span>Choose an address</span></legend><label for="homeoption" id="homeaddr"><span>Home</span><br/>1 Main St.<br />Sicilia, MA 02103<input type="radio" id="homeoption" name="shippingaddr"onclick="document.getElementById('streetinput').value = '1 Main St.';document.getElementById('cityinput').value =…arrow_forwardI want to extract the value under content in one of the div tags, more specifically, I want to extract 4.0 from: <div itemprop="ratingValue" content="4.0"></div> The problem is that there are multiple rows with content in them. I've attached the screenshot from developer tools.arrow_forwardQ6. By using the program below: Kindly Set the transparency/opacity of the <h1> element to "0.4". <!DOCTYPE html> <html> <head> <style> h1 { background-color: red; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>arrow_forward
- Which of the following is considered a slide object?• bullet• paragraph• placeholder• borderarrow_forwardWhich JavaScript code using the jQuery library should be placed in the blank to make the boldbright heading appear and then grow larger and more opaque over a period of 0.8 seconds when the command is executed?$("h1.boldbright").css({ fontSize: 0, width: 0, opacity: 0})_____ a. animate({ fontSize: "2.5em", width: "1000px", opacity: 1}, 800); b. fadeIn(800, () => { $("h1.boldbright").text("2.5em," "1000px", 1);}); c. animate({ fontSize: "0.5em", width: "1000px", opacity: 0}, 800); d. $("h1.boldbright").fadeIn("2.5em," 800);arrow_forwarduse the given code to answer the following questions. <style> #wrapper { Display: flex; Flex- wrap: wrap; Justify-content: space-between ; } .box { Width: 500px; Border: solid 1px blue; Margin:5px; } </style> <div id “wrapper”> <div class “box”> Box 1</div> <div class “box”> Box 2</div> <div class “box”> Box 3</div> <div class “box”> Box 4</div> </div> How will the boxes be arranged if the viewpoints width is 600px? Two rows of two A single row of four A row of three with one below A single column of fourarrow_forward
- Q7. By using the program below: Kindly Set the font family for the page to "Courier New", and the font family for <h1> to "Verdana". <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>arrow_forwardC++ Question Hello, Please create the correct code for the attached picture. Please create the code based on the given requirements. Please make sure it is working. Thank you!arrow_forwardYou want to set a wider inside margin to accommodate binding a document where pages are printed on both sides. Which option should you choose in the Page Setup dialog box?arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning