CSS Layout

The following screenshot of a webpage includes an image that has been styled and resized.
 
screenshot of a webpage with subtly spaced paragraphs with red borders and yellow text and a large amount of spacing between the text and the border
Which of the following CSS properties were most likely used to style that image, if the web developer was using standard practices?
Choose all answers that apply:

 

The styled image is floating on the left of the text, with the text wrapping around. The standard way to achieve that is by setting float: left and adding a margin so the text isn't right up against the image, always a margin-right and often a margin-bottom. The image can also be resized to fit better, with width. Therefore, the most likely properties used here are:
margin-right: 10px;
float: left;
width: 100px;
Here's a run-down of the other properties and why they likely wouldn't be used.
propertyWhy not?
float: right; This would float it on the right hand side instead.
position: relative; There's no particular reason to use relative positioning here.
position: absolute; There's no particular reason to use absolute positioning here.
left: 20px; There's no reason to use relative or absolute positioning here, and that's what left is used with.
padding-right: 10px; It is possible to use padding-right for a similar effect, but it is unusual. Better to use margin-right.
width: 50%; If the width was 50%, then it'd take up half the container, which it's not doing.
padding-left: 10px; It is possible to use padding-left to space it from the left edge of the container, but it's better to have padding on the container itself, which is what was done here (you can see it's not just around the image).
margin-left: 10px; Once again, it is possible to use margin-left to space it from the left edge of the container, but it's better to have padding on the container itself, which is what was done here (you can see it's not just around the image).

 

posted @ 2018-03-20 15:51  Veritas_des_Liberty  阅读(242)  评论(0编辑  收藏  举报